1、案例描述

列表渲染

2、实现过程

2.1、代码展示

• wxml

<!--index.wxml-->
<view class="box">
  <view>
    <view>绑定数组渲染</view>
    <view wx:for="{{array}}" wx:key='*this'>
      array[{{index}}]:{{item}}
    </view>
  </view>
  =================
  <view>
    <view>直接数组渲染</view>
    <view wx:for="{{['春','夏','秋','冬']}}" wx:key='*this'>
      数组下标[{{index}}]:数组元素[{{item}}]
    </view>
  </view>
  =================
  <view>
    <view>对象渲染</view>
    <view wx:for="{{object}}" wx:key='*this'>
      {{index}}:{{item}}
    </view>
  </view>
  =================
  <view>
    <view>字符串渲染以及修改index和item</view>
    <view wx:for="{{chart_shuzu}}" wx:for-index="id" wx:for-item="it" wx:key='*this'>
      {{id}}:{{it}}
    </view>
  </view>
  =================
  <view>在block中使用wx:for</view>
  <block wx:for="{{['6','2']}}">
    <view class="bl_wx" style="background-color: red;"></view>
    <view class="bl_wx" style="background-color: green;"></view>
    <view class="bl_wx" style="background-color: blue;"></view>
  </block>
</view>

• wxss

.bl_wx{
    width: auto;
    height: 5px;
}

• js

//index.js

Page({
  data:{
   array : ['张三','赵四','王五','三哥'],
   object : {
    姓名 : '光头强',
    爱好 : '砍树',
    工资 : '10000/月'
  },
  chart_shuzu : '阿三'
  },
  
  
})

2.2、结果展示

结果.jpg

3、知识汇总

知识要点.jpg 知识要点2.jpg 注意.jpg 注意2.jpg

4、踩坑说明

• 发生写在js的data:{}当中的变量无法传到页面的情况，要检查变量名是否正确，这是最常见的错误。
• wx:for-index=id和wx:for-item=it写法是错误的，应该改正为：wx:for-index="id"和wx:for-item="it" ，因为替换index和item的应该是字符串。
• 在block中使用wx:for={{列表}}，目的就是根据列表中元素的个数来决定执行几次block当中的组件，与列表中元素本身没有关系。解释如下：

js

//等效代码1
<block wx:for="{{['wo','6']}}">
    <view class="bl_wx" style="background-color: red;"></view>
    <view class="bl_wx" style="background-color: green;"></view>
    <view class="bl_wx" style="background-color: blue;"></view>
  </block>
//等效代码2
<block wx:for="{{[1,2]}}">
    <view class="bl_wx" style="background-color: red;"></view>
    <view class="bl_wx" style="background-color: green;"></view>
    <view class="bl_wx" style="background-color: blue;"></view>
  </block>
//等效代码3
<block wx:for="{{['wo','qv']}}">
    <view class="bl_wx" style="background-color: red;"></view>
    <view class="bl_wx" style="background-color: green;"></view>
    <view class="bl_wx" style="background-color: blue;"></view>
  </block>

结果展示：

结果.jpg