300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 微信小程序----wx:key(Now you can provide attr wx:key for a wx:for to improve performance.)

微信小程序----wx:key(Now you can provide attr wx:key for a wx:for to improve performance.)

时间:2024-01-04 11:07:03

相关推荐

微信小程序----wx:key(Now you can provide attr wx:key for a wx:for to improve performance.)

WXRUI体验二维码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

效果图

官网解释

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容,的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

解决办法

wx:key 的值以两种形式提供:

字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

实例

官网实例:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch><button bindtap="switch"> Switch </button><button bindtap="addToFront"> Add to the front </button><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch><button bindtap="addNumberToFront"> Add to the front </button>

实例:

<view class="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="getType" data-type="{{item.id}}" wx:key="aroundListId" wx:for="{{aroundList}}">{{item.name}}</view>

注意

如果wx:key 的值是字符串----必须满足:唯一的字符串或数字,且不能动态改变。如果wx:key 的值是关键字 *this----必须满足:item 本身是一个唯一的字符串或者数字。

WXRUI体验二维码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

DEMO下载

更多微信小程序实例

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。