版权声明: 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日