数据绑定我就不说,看看官方文档就行了,主要就注意下this.setData({})改变数据值就行。
一、列表渲染
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
block并不会渲染出来
wx:key项目的唯一标识符,一般来说最好设置一个挺不错的,免得报warning
下面直接上例子:
wxml:
<view>
<block
wx:for="{{infoList}}"
wx:for-item="item"
wx:for-index="index"
wx:key="nameList">
<view
class='section'>
<view>{{index}}</view>
<view>用途:{{item.name}}</view>
<view>电话:{{item.phone}}</view>
</view>
</block>
</view>
Page({
data:{
infoList:[{
phone: 110,
name: "报警电话"
},{
phone: 119,
name: "火警电话"
}, {
phone: 120,
name: "急救电话"
}
]
}
})
二、条件渲染
我的理解就是根据条件判断是否渲染,每次改变条件的结果都会重新渲染一次。
block和列表渲染一样,不会渲染到视图里面
wx:if里面的条件判断为true时渲染显示,false时不渲染
wxml:
<button
bindtap='changeView'
type='primary'>切换状态</button>
<view
wx:if="{{info == true}}">
<block
wx:for="{{infoList}}"
wx:for-item="item"
wx:for-index="index"
wx:key="nameList">
<view
class='section'>
<view>用途:{{item.name}}</view>
<view>电话:{{item.phone}}</view>
</view>
</block>
</view>
Page({
data:{
infoList:[{
phone: 110,
name: "报警电话"
},{
phone: 119,
name: "火警电话"
}, {
phone: 120,
name: "急救电话"
}
],
info:true
},
changeView:function(){
var info = this.data.info;
this.setData({
info:!info
})
}
})
相同点:都可以控制元素的显示与否
不同点:
1、wx:if判断条件是true时显示,hidden是遇到false时显示;
2、wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现
因此在官方文档中会说频繁切换显示隐藏的话wx:if消耗更多资源。因为它每次显示都会渲染,隐藏就销毁。
总结条件渲染就是:频繁切换用hidden,偶尔切换用wx:if