微信小程序开发-列表渲染和条件渲染

数据绑定我就不说,看看官方文档就行了,主要就注意下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 >
js:

Page({
data:{
infoList:[{
phone: 110,
name: "报警电话"
},{
phone: 119,
name: "火警电话"
}, {
phone: 120,
name: "急救电话"
}
]
}
})
Tip:值得注意的一点就是花括号{}和引号""之间如果有空格会被解析成字符串。

二、条件渲染

我的理解就是根据条件判断是否渲染,每次改变条件的结果都会重新渲染一次。

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 >
JS:

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
})
}
})
wx:if和hidden的异同:

相同点:都可以控制元素的显示与否

不同点:

1、wx:if判断条件是true时显示,hidden是遇到false时显示;

2、wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现

因此在官方文档中会说频繁切换显示隐藏的话wx:if消耗更多资源。因为它每次显示都会渲染,隐藏就销毁。

总结条件渲染就是:频繁切换用hidden,偶尔切换用wx:if



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值