微信小程序wx:key几种设置方式丨技术开发分享录

微信小程序wx:key几种设置方式

%{ detail.nickname }

转载翻译 %{ formatTime(detail.create_time) } 字数 %{ detail.content && detail.content.length } 阅读 %{ detail.read_num } 评论 %{ comment.page.total } 喜欢 %{ total(detail.like_uids) } %{ formatTag(v) } 编辑文章

对于key官方文档描述的很清晰，主要的作用是当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

注意：如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

一、index

wx:for遍历数据默认索引是index

<view wx:key="index"></view>

二、*this

*this在官方文档上的介绍是item本身，不过只能在item是维一数字或字符串时才能使用

例如：

<view wx:for="{{[1,2,3]}}" wx:key="*this"></view>

或

<view wx:for="{{['a', 'b', 'c']}}" wx:key="*this"></view>

三、使用维一属性值

如果item是一个对象时，可使用能代表唯一值的属性，如：id

<view wx:for="{{[{id: 1, name: 'tom'}, {id: 2, name: 'rose'}]}}" wx:key="id"></view>

参考链接：

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

PS：写作不易，如要转裁，请标明转载出处。

%{ comment.page.total }条评论

%{ v }

微信小程序wx:key几种设置方式

一、index

二、*this

三、使用维一属性值

猜你想看