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

最新推荐文章于 2025-06-25 08:55:28 发布

原创最新推荐文章于 2025-06-25 08:55:28 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了小程序中的数据绑定方法及列表和条件渲染技巧。通过具体示例展示了如何使用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
})
}
})