微信小程序wx:key使用

demo.wxml :

<block wx:for="{{arr}}" wx:key="*this" wx:for-item="data" wx:for-index="idx"><view><checkbox/>{{data}}</view>
</block>
<button bind:tap="sort">随机排序</button>

demo.js :

  data: {arr: ['wxml', 'js', 'wxss', 'json']},sort() {const length = this.data.arr.lengthfor (let i = 0; i < length; i++) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const temp = this.data.arr[x]this.data.arr[x] = this.data.arr[y]this.data.arr[y] = temp}this.setData({arr: this.data.arr})

点击随机排序按钮，checkbox选中会跟随内容一起变化。

当我们使用的数组数据里有唯一的id，我们可以直接使用这个唯一的id。

我们的数组数据如下：

    arrObj: [{id: 1,name: 'wxml'}, {id: 2,name: 'js'}, {id: 3,name: 'wxss'}, {id: 4,name: 'json'}],

重新编写sort方法：

  sortObj() {const length = this.data.arrObj.lengthfor (let i = 0; i < length; i++) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const temp = this.data.arrObj[x]this.data.arrObj[x] = this.data.arrObj[y]this.data.arrObj[y] = temp}this.setData({arrObj: this.data.arrObj})},

wx:key直接使用id即可。

<block wx:for="{{arrObj}}" wx:key="id"><view><checkbox/>{{item.name}}</view>
</block>
<button bind:tap="sortObj">随机排序</button>

微信小程序wx:key使用相关推荐

微信小程序wx:key的解释
做个微信小程序开发的朋友们大多数肯定都遇到过这样一个警告: wx:key解释: 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,这时就需要wx:ke ...
微信小程序 wx:key 微信:for
warning: 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.）
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 效果图官网解释如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项 ...
微信小程序 wx:key 提示-解决
在实际开发过程中遇到 warning: Now you can provide attr "wx:key" for a "wx:for" to improve ...
微信小程序 wx:key
在实际开发过程中遇到 warning: Now you can provide attr "wx:key" for a "wx:for" to improve ...
微信小程序wx:key
转自https://blog.csdn.net/qq_40095973/article/details/80332063 1:wx:key="字符串" 这个"字符串&qu ...
微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念区别: wx.setStorage是异 ...
微信小程序wx.request接口
微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...

微信小程序wx:key使用

微信小程序wx:key使用相关推荐

最新文章

热门文章