昨天写了如何从api中获取数据到页面上,仅仅是少数几个数据,但是如果要获取数组中的一串数据该如何获取呢,那么就要用到wx:for
循环了,在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
这是官方文档给出的例子
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
核心代码就是 wx:for,对应一个数组。
而 wx:for-index 指明后面如果要用数组索引的话,用什么名字,如果名字是 index,则可省略,直接使用。
而 wx:for-item 指明后面如果要用数组索引对应的项的话,用什么名字,如果名字是 item,则可省略,直接使用。 一般后面两个属性都不写
这样直接拿到天气了的一个数组,然后把把拿到数组setData
js文件
that.setData({
forecast: res.data.data.forecast
});
接下来就要用到wx:for
循环了,直接上代码
wxml文件
<view wx:for="{{forecast}}" wx:for-index="idx" wx:for-item="item">
{{idx+1}} {{item.date}}{{item.high}}
</view>
wx:for="{{forecast}}"
括号里面的与setdata的数组对应
wx:for-index="idx"
代表数组的下标(可以不写)
wx:for-item="item"
数组当前的变量名(也可以不写,但是当循环有多层的时候要写,会将变量名覆盖)
在页面输出结果
{{idx+1}}
表示在当前的数组下标+1