在微信小程序实现过程中,常常遇到需要动态显示多元素的需求,比如,点餐小程序的商品种类,当商家创建或删除产品种类时,小程序需要同步更新,如果每次都在wxml创建或删除元素,会很麻烦,可以使用wx:for实现多元素动态显示。
如下所示:
.wxml:
在wxml中使用wx:for遍历item_list数组中的元素信息,每个元素创建一个view元素。
item是默认的数组当前元素名,index是默认的数组当前指针名,通过wx:for-item和wx:for-index可以重命名元素和指针名字,在有多层次wx:for时可以避免使用混淆。
html
<scroll-view class="menu" scroll-y="true">
<view wx:for="{{item_list}}">{{item.name}}</view>
</scroll-view>
.js:
在js中可以定义和更新item_list的值,更新后wxml的元素自动变更。
html
data:{
item_list: [
{
type: "food",
name: "牛肉粉"
},
{
type: "snack",
name: "小吃"
},
{
type: "add",
name: "加餐"
},
{
type: "drink",
name: "饮料"
},
]}
以上内容显示如下:
更多微信小程序内容欢迎关注我或订阅专栏。