View绘制
####一、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
网友评论