微信小程序key的使用场景【给无序数据添加元素和随机打乱数组中的元素】

最新推荐文章于 2024-03-29 09:31:18 发布

技术项目经理

最新推荐文章于 2024-03-29 09:31:18 发布

阅读量669

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43837268/article/details/98735871

版权

小程序专栏收录该内容

34 篇文章 0 订阅

订阅专栏

log.wxml

<!--logs.wxml-->
<view class="container log-list">
  <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>

logs.js

//logs.js
var util = require('../../utils/util.js');
var app = getApp();
Page({
  data: {
    objectArray: [
      { id: 5, unique: 'unique_5' },
      { id: 4, unique: 'unique_4' },
      { id: 3, unique: 'unique_3' },
      { id: 2, unique: 'unique_2' },
      { id: 1, unique: 'unique_1' },
      { id: 0, unique: 'unique_0' },
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function (e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function (e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{ id: length, unique: 'unique_' + length }].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function (e) {
    this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})