微信小程序-列表渲染

一. 列表渲染

wx:for : 列表
wx:key： 列表的item的key值，用来循环列表
data里面定义：

Page({
  data:{
    numList:[1,2,3],
    fruitList:[
      {id:1,name:'🍎',price:1},
      {id:2,name:'🍋',price:1},
      {id:3,name:'🍅',price:1}
    ],
    obj:{
      name:'tom',
      age:10
    }
  }
  
})

.wxml里面的代码

<!-- item:数组的每一项，index：下标 -->
<view wx:for="{{numList}}">{{item}}-{{index}}</view>
<!-- item：对象属性的值，index：对象属性 -->
<view wx:for="{{obj}}">{{item}}-{{index}}</view>

<!-- wx:key:提升性能 -->
<!-- 1.字符串 item的唯一关键字 -->
<!-- 2.字符串 保留关键字 *this -->
<view wx:for="{{fruitList}}" wx:key="id">
{{item.name}}--{{item.id}}--{{index}}
</view>
<view wx:for="{{numList}}" wx:key="*this">
{{item}}
</view>

显示效果：

二.列表渲染进阶

通过wx:for-item/wx:for-index给item和key值起别名

<!-- 数组：通过wx:for-item/wx:for-index起别名 -->
<view wx:for="{{fruitList}}"
wx:key="key" wx:for-item="value" 
wx:for-index="key"
>{{value.name}}--{{key}}</view>
<!-- 对象 -->
<view wx:for="{{obj}}" 
wx:key="key" wx:for-item="value" wx:for-index="key"
>{{value}}--{{key}}</view>

使用block块显示多个view，此时的block快不占据组件结构。

<!-- block -->
<block wx:for="{{fruitList}}" 
wx:key="id" wx:for-item="item"
wx:for-index="i">
<view>name:{{item.name}}</view>
<view>price:{{item.price}}</view>
</block>

显示效果