微信小程序列表渲染（循环渲染）

版权声明： https://blog.csdn.net/smileyan9/article/details/87894056

1. 编写目的

一个简单例子，介绍微信小程序如何实现列表渲染（循环渲染）

2. 例子

js代码中准备数据（数组）：

  data: {
    smiles: [
      "../../image/weather/smile1.png",
      "../../image/weather/soso.png",
      "../../image/weather/unhappy.png",
      "../../image/weather/cry.png"
    ]
  }

wxml中编写循环渲染：

 <view class="demo-container" id="model_weather">
    <block wx:for="{{smiles}}"wx:key="yyy"  wx:for-item="itemName" wx:for-index="index"  >
     <image class="image" src="{{itemName}}" bindtap='img_smile' data-smile='{{index}}'/>
    </block>
  </view>

下面是对应关系：

变量名	对应关系
smiles	对应data中整个数组
yyy	随便起的，为了解决IDE报出的警告问题
itemName	变量的值，比如…/…/image/weather/smile1.png等等
index	数组下标，从0开始，0,1,2,3

输出的效果如下：

3. 说明

同样的道理，那些变量名可以随便定义，但是循环体中使用这些变量时不要弄错，免得带来一些麻烦。

Smileyan 2019年2月23日