美文网首页
View绘制

View绘制

作者: 不会弹钢琴de大叔 | 来源:发表于2023-10-07 09:33 被阅读0次
####一、View布局排列

1、水平排列
{
  display:flex;
  flex-direction:row;
}
2、垂直排列
{
  display:flex;
  flex-direction:column;
}
3、居中效果
  3.1、水平排列
    3.1.1、水平居中
              {
                  display:flex;
                  flex-direction:row;

                  justify-content:center;
              }
    3.1.2、垂直居中
              {
                  display:flex;
                  flex-direction:row;

                  align-items:center;
              }
  3.2、垂直排列
    3.2.1、水平居中
              {
                  display:flex;
                  flex-direction:column;

              align-items:center;
              }

    3.2.2、垂直居中
              {
                  display:flex;
                  flex-direction:column;

                  justify-content:center;
              }
  3.3、居中循环
    3.3.1、水平、垂直排列
              {
                  display:flex;
                  flex-direction:column;

                  justify-content:center;
                  align-items:center;
              }


---------------------------
#### 二、for循环

<view wx:for="{{ xxx }}" wx:for-item="item">
    <view class="xxx" bindtap="onCLickXXX" data-bean="item">
        <image src="xx"/>
        <text >{{item.name}}</text>
    </view>
</view>

onCLickXXX:function(e:any){
    var data = e.currentTarget.dataset;
    data.bean
}
------------------------
####三、跳转

wx.navigateTo({
    url:'../xx/xx?name=aaa'
})

onLoad:function(options:any){
      var name = options.name;

}

####四、返回上一界面

/**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    var that = this 
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面

    prevPage.setData({
      userName: that.data.contentStr
    });
  },

相关文章

网友评论

      本文标题:View绘制

      本文链接:https://www.haomeiwen.com/subject/qogmbdtx.html