【微信小程序】框架wxml（二）wxml列表渲染

列表渲染在之前的demo中已经应用过，在这里系统的记录一下。

1.wx:for的使用

（1）首先在js声明两个数组lipsticks和lipsticks2

Page({
  data: {
    lipsticks:["YSL13","Dior999","Armani405"],
    lipsticks2:[
      {
        name:"YSL13",
        price:320
      }, {
        name: "Dior999",
        price: 300
      }, {
        name: "Armani405",
        price: 320
      }
    ]
  },
})

①wxml中使用wx:for对数组lipsticks进行循环访问，当前项的索引默认为index，当前项的变量名。

<text class="topic-group">列表渲染</text>
  <view wx:for="{
  {lipsticks}}">
    {
  {index}}:{
  {item}}
  </view>

查看效果图↓

②对lipsticks2数组的访问， wx:for-item指定数组当前元素的变量名，wx:for-index指定数组当前元素的索引值。（在该部分中，用lipId代替index，lip代替item）