今天厦门在乎科技为大家带来微信小程序wxml怎么进行列表渲染，可能对于刚接触小程序开发项目的人来说，还不是很熟悉，有开发经验的也可以重新复习一下。
小程序wxml列表渲染详解：
1.变量声明
在页面js文件中声明要遍历的数组变量
data: {
list:['苹果','香蕉','西瓜'],
person:{
name:"小明",
age:20
}
},
2.语法
在wxml文件的标签中插入 wx:for="{{list}}"
循环数组时：
index：索引
item：循环项
遍历对象时：
index：key
item：键值
<view wx:for="{{list}}">{{index}}:{{item}}</view>
3.为列表项绑定key
类似于vue，微信小程序列表渲染是希望为每个列表项绑定一个key
语法：wx:key="{{}}"
<view wx:for="{{list}}" wx:key="{{item}}">
{{index}}:{{item}}
</view>
<view wx:for="{{person}}" wx:key="{{item}}">
{{index}}:{{item}}
</view>
4.自定义下标名称和列表项名称
语法：
wx:for-index="自定义的下标名称"
wx:for-item="自定义的列表项名称"
<view wx:for="{{person}}" wx:key="{{item}}" wx:for-index="key" wx:for-item="value">
{{key}}:{{value}}
</view>
5.外层包裹的元素 block
如果列表项内部有多个标签，而你不需要循环的时候都生成一个外层的view元素，可以使用block。他不会渲染成真正的dom元素，类似于vue的template。
<view wx:for="{{person}}" wx:key="{{item}}" wx:for-index="key" wx:for-item="value">
<text>{{key}}:</text><text>{{value}}</text>
</view>
<block wx:for="{{person}}" wx:key="{{item}}" wx:for-index="key" wx:for-item="value">
<text>{{key}}:</text><text>{{value}}</text>
</block>
以上就是今天为大家带来的关于“微信小程序列表渲染 小程序wxml列表渲染详解”全部内容，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件，想要了解更多关于小程序列表渲染的内容，欢迎关注厦门在乎科技-专注小程序、app、网站开发
