商城小程序列表渲染的方法

今天小编给大家分享一下商城小程序列表渲染的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

<view wx:for="{{items}}">

 {{index}}: {{item.message}}

</view>

Page({

 items: [{

 message: 'foo',

 },{

 message: 'bar'

 }]

})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">

 {{idx}}: {{itemName.message}}

</view>

wx:for也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">

 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">

 <view wx:if="{{i <= j}}">

  {{i}} * {{j}} = {{i * j}}

 </view>

 </view>

</view>

block wx:for

类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">

 <view> {{index}}: </view>

 <view> {{item}} </view>

</block

以上就是“商城小程序列表渲染的方法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。