ミニプログラム WXSS wx:key の機能と使用例

ミニプログラムWXSS wx:keyの使用方法?リスト内の項目が動的に変更される場合、wx:key を設定する必要があります。パフォーマンスを向上させるために、「wx:for」に属性「wx:key」を指定できるようになりました。現れる。

VM1364:2 ./index/index.wxml
(anonymous) @ VM1364:2
VM1364:3  Now you can provide attr "wx:key" for a "wx:for" to improve performance.
> 1 | <view wx:for="{{data}}"   class="block" style="{{item.style}}">
    | ^
  2 | Block{{index}}
  3 | <view>{{item.title}}</view>
  4 | </view>
(anonymous) @ VM1364:3

wx:key の公式説明:

リスト内の項目の位置が動的に変更されるか、新しい項目がリストに追加され、リスト内の項目が独自の特性とステータスを維持したい場合(<input>の入力内容、<switch></switch>の選択状態など)、wx:keyを使用する必要があります。 でリストを指定します。 プロジェクトの一意の識別子。

リスト内の項目が動的に変化する場合、wx:keyを設定する必要があります。設定しない場合は、上記の図の状況では、データ 4 を追加したいのですが、左の図では、データ 4 が無秩序な位置に配置されています。これは望ましくないことです。これを防ぐために、次のようにします。 set wx:key.

<input> 中的输入内容， <switch></switch> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

当列表中的项目动态的改变的时候，我们需要设置wx:key，如果我们不设置，会出现如上图的情况，我们想要加入数据4，在左图中数据4被排在了乱的位置，这个是我们不希望的，因此为了防止这种情况的出现，我们设置wx:key.

wx:keywx:key の値は 2 つの形式で提供されます:

1. for ループの配列内の項目のプロパティを表す文字列。 property はリスト内の唯一の文字列または Number である必要があり、動的に変更することはできません。

2. for ループ内の項目自体を表す予約キーワード。この表現では、項目自体が次のような一意の文字列または数値である必要があります。

データが変更されると、レンダリング レイヤーが再レンダリングされます。キーを使用してコンポーネントを修正すると、フレームワークは、コンポーネントが独自の状態を維持し、リストのレンダリングの効率を向上させるために、コンポーネントが再作成されるのではなく並べ替えられることを保証します。

<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>


<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

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: &#39;unique_&#39; + 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
    })
  }
})

関連のおすすめ:

ミニプログラム開発のためのwx:keyの詳細な説明

WeChatミニプログラムwx:keyの詳細な紹介

以上がミニプログラム WXSS wx:key の機能と使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。