列表渲染
原创...大约 2 分钟
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view>
<view wx:for="{{ users }}" wx:key="index">{{ item }}</view>
</view>
Page({
data: {
users: ["hello", "world"],
},
});
使用 wx:for-item
可以指定数组当前元素的变量名
使用 wx:for-index
可以指定数组当前下标的变量名
<view wx:for="{{ users }}" wx:for-item="user" wx:for-index="ids">
{{ user }}-{{ ids }}
</view>
Page({
data: {
users: ["hello", "world"],
},
});
网络请求拿到的数据是 json 格式,相对比要复杂一些
<view>
<block wx:for="{{ result }}" wx:for-item="item">
<view>{{ item.name }}</view>
<image src="{{ item.pic }}"></image>
<view>{{ item.description }}</view>
<view>{{ item.price }}</view>
<view>{{ item.city }}</view>
</block>
</view>
Page({
data: {
result: [
{
id: 1,
name: "美食-甜豆干",
pic: "http://iwenwiki.com:3002/images/goods/1.jpg",
description:
"津津卤汁豆腐干苏州特产豆干零食素食老字号食品豆制品小吃90g*10",
price: "39.90",
type: 0,
buynum: "435",
city: "北京",
},
{
id: 2,
name: "好欢螺螺蛳粉300g*6袋",
pic: "http://iwenwiki.com:3002/images/goods/2.jpg",
description:
"好欢螺螺蛳粉300g*6袋柳州特产螺狮粉美食螺丝粉煮水方便面酸辣粉",
price: "69.99",
type: 0,
buynum: "3333",
city: "北京",
},
],
},
});
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,需要使用 wx:key 来指定列表中项目的唯一的标识符
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略
Powered by Waline v2.15.7