wx:for
一维数组情况:
在页面上
view wx:for ="{{list}}"
{{item.id}}
view
是循环list
item是List的别名
多维数组情况:
view wx:for ="{{parent_list}}"
{{item.id}}
view wx:for ="{{item.childlist}}" wx:for-item="items"
{{item.id}}
view
view
items是子List的别名。子Lsit是 item.childlist
总结: wx:for 是循环list wx:for = "{{list}}"换成wx:for-items="{{list}}" 结果是一样 的 也就是 wx:for等价与wx:for-items是循环数组用的;
使用 wx:for-item
可以指定数组当前元素的变量名,
使用 wx:for-index
可以指定数组当前下标的变量名:默认 index
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
对 wx:key 补充:
如果 列表中 项目位置 会动态改变 或者可能会有新的项目会加入列表中
需要标识这个项目在列表的位置:
则 可以选 用ltem的某个唯一的属性作为Key
或者 用 *this 关键字代表 for循环的item本身,这种表示需要item本身就是 一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
举例子:一个应用:
获得了N条信息,但是不确定具体多少条。怎么在界面上显示呢
wxml代码
<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item"> {{index+1}}、{{item.title}} </view>
js代码
Page({ data: { items: [ { "url":"http://127.0.0.1/1.flv", "title":"这是标题一" }, { "url":"http://127.0.0.1/2.flv", "title":"这是标题二" } ] } })