View绘制

2023-10-07  本文已影响0人  不会弹钢琴de大叔
####一、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
    });
  },
上一篇 下一篇

猜你喜欢

热点阅读