微信小程序 - 循环语句wx:for的使用

  小程序的循环结构：wx:for，其中，wx:for对应的是要循环的那个数组，wx:for-index对应的是循环数组的索引值，wx:for-item对应的是循环数组中的每一项，wx:key表示的是数组的唯一值（在使用wx:for的时候要加上这个，否则编译器会提示警告）。
下面举个例子：
在index.wxml文件中

<view class='sort-ct-item' wx:for='{{lists}}' wx:for-index="indexs" wx:for-item="items" wx:key="indexs">
   <view class='item-img'>
     <image src='{{items.src}}'></image>
   </view>
   <view class='sort-ct-title'>
      <view>{{items.name}}</view>
   <view class='price'>{{items.price}}</view>
</view>

要循环的数组结构：

lists: [
        {
            tid: 1,
            src: '../../images/1.jpg',
            name: '毛巾,
            price: '¥6.90'
          },
          {
            tid: 2,
            src: '../../images/2.jpg',
            name: '拖鞋',
            price: '¥5.90'
          },
          {
            tid: 3,
            src: '../../images/3.jpg',
            name: '瓶子',
            price: '¥4.90'
          }
]