微信小程序循环 wx:for、wx:for-item(s)、data-xxx 全攻略

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/[email protected]"></image>
	<text>任务已过期</text>
	</view>

	<view class="cate-item">
	<image class="cate-icon" src="../../image/[email protected]"></image>
	<text>{{item.address}}</text>
	</view>

	<view class="statistics">
	<view class="statistics-cate">
	<image class="cate-icon" src="../../image/[email protected]"></image>
	<text class="num">{{item.signedNum}}</text>
	</view>
	<view class="statistics-cate">
	<image class="cate-icon" src="../../image/[email protected]"></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 来得到子元素上绑定的日期属性。

更多小程序开源文章，请移步我的微信公众号：月小水长