wx:for、wx:for-items、wx:for-item的区别和联系
一说到小程序的列表视图循环,肯定少不了 wx:for、wx:for-items、wx:for-item 这三剑客。
从定义上来说,
wx:for 用于单纯的数组循环。一般数组的元素是数字或字符串。
wx:for-items 用于复杂的循环,子元素可以是包含多个属性的对象。如果未设置 wx:for-item,则可以在循环中直接通过 {{item.属性名}} 来访问子元素的属性值。
wx:for-item 一般结合wx:for-items 使用,相当于给子元素起别名,如果缺省,默认值是 item,如果设置 wx:for-item=‘aName’,则可以在循环中通过 {{aName.属性名}} 来访问子元素的属性值。
例:下面的代码,
<block wx:for-items="{{myTasks}}" wx:key="key">
<view class="task-name">
<text>{{item.date}} {{item.name}}</text>
</view>
<view class="cate-item">
<image class="cate-icon" src="../../image/icon_clock_yellow@3x.png"></image>
<text>任务已过期</text>
</view>
<view class="cate-item">
<image class="cate-icon" src="../../image/icon_location_green@3x.png"></image>
<text>{{item.address}}</text>
</view>
<view class="statistics">
<view class="statistics-cate">
<image class="cate-icon" src="../../image/icon_complete-person@3x.png"></image>
<text class="num">{{item.signedNum}}</text>
</view>
<view class="statistics-cate">
<image class="cate-icon" src="../../image/icon_total-people@3x.png"></image>
<text class="num">{{item.totalNum}}</text>
</view>
</view>
<view class="task-icon" id="{{item._id}}">
<image class="more" src="../../image/icon_check_unselected.png" hidden='{{item.isMe==1 ? true : false}}'></image>
<image class="more" src="../../image/icon_check_selected.png" hidden='{{item.isMe==1 ? false : true}}'></image>
</view>
</block>
其显示出来的视图为:
wx:key
wx:key是对微信循环功能的一次提升,在软件编译的时候,微信会提示你是用 wx:key来稳定视图层的项目显示。
wx:key 的值以3种形式提供
- 字符串
代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字 *this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。一般是指定一个唯一的字段(类似于id的定义);
- 通配符+名字
- 例如 *item
如果不设置 wx:key,控制台会打印警告:
Now you can provide attr "wx:key" for a "wx:for" to improve performance.
可以通过设置 wx:key=“key” 来去掉警告,例子同样参考参见上一份代码。
在循环中设置 data-xxx 从而便于在监听事件中获取与子视图绑定的数据
例如,在子元素的标签中设置了 data-taskdate="{{item.date}}"
可以在 js 文件的监听回调函数中通过 e.currentTarget.dataset.taskdate 来得到子元素上绑定的日期属性。
.date}}"
可以在 js 文件的监听回调函数中通过 e.currentTarget.dataset.taskdate 来得到子元素上绑定的日期属性。
更多小程序开源文章,请移步我的微信公众号:月小水长