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

本文介绍了小程序中的数据绑定方法及列表和条件渲染技巧。通过具体示例展示了如何使用wx:for进行列表渲染,并讨论了wx:if与hidden指令在条件渲染上的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数据绑定我就不说,看看官方文档就行了,主要就注意下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、付费专栏及课程。

余额充值