ホームページ > 記事 > WeChat アプレット > WeChatミニプログラムリスト開発の詳細な説明

WeChatミニプログラムリスト開発の詳細な説明

小云云オリジナル: 2018-03-17 13:23:265697ブラウズ

この記事では、WeChat アプレットリストの開発について、主にコードの形で詳しく説明しますので、皆さんのお役に立てれば幸いです。

1. 知識ポイント

(1). wx:for

tip:wx:for=“array”可以等于参数名，在js中调用
Page({ data:{
array: [{name: &#39;小李&#39;},{ name: &#39;小高&#39;}]}
 })，获取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面

1. コンポーネントの wx:for コントロール属性を使用して、各項目のデータを使用できます。コンポーネントを繰り返しレンダリングするための配列。

デフォルトでは、配列の現在の項目の添字変数名はデフォルトでindexに設定され、配列の現在の項目の変数名はデフォルトでitemに設定されます

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

var app = getApp()
Page({
    data:{
      items: [{
        message: &#39;foo&#39;,
      },{
        message: &#39;bar&#39;
      }]
    }
})

まず、wxmlファイル内で、wx:for items の後の二重中括弧は配列です。配列の要素は、{{index}}:{{item.arry}} の下の wx:for で示されているとおりです。index は、 items 配列であり、item.arry は配列内の要素、つまり「a」と「b」です。

2. wx:for-item を使用して、配列の現在の要素の変数名を指定します。 wx:for-index を使用して、配列の現在の添字の変数名を指定します。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.name}}
</view>

var app = getApp()
Page({
    data:{
      array: [{
        name: &#39;小李&#39;,
      },{
        name: &#39;小高&#39;
      }]
    }
})

3.wx: for は js

なしで

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  	<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
	    <view wx:if="{{i <= j}}">
	       {{i}} * {{j}} = {{i * j}}
	    </view>
 	</view>
</view>

をネストすることもできます

(2).block wx:for
ブロック wx:if と同様に、wx:for も 2b5957c2850173214f4ea7f1261e9a0f タグで使用して、複数のノードを含む構造ブロックをレンダリングできます。

db484d4a41a92a66cda1afdafdb156b6
  89c662c6f8b87e82add978948dc499d2 {{index}}:{{item.name}}de5f4c1163741e920c998275338d29b2
36b196a5d42bcd29e331cb722979f9a6

var app = getApp()
Page({
    data:{
      array: [{
        name: &#39;小李&#39;,
      },{
        name: &#39;小高&#39;
      }]
    }
})

(3).wx:key

リスト内の項目の位置が動的に変更されるか、新しい項目がリストに追加され、リスト内の項目が独自の状態を維持するようにしたい場合特性とステータス (0f0306f9b187f2e363126bc29c8b1420 の入力内容、698d939a2c9041f2302734cfeb04788e の選択状態など) を取得するには、wx:key を使用してリスト内の項目の一意の識別子を指定する必要があります。
文字列は、for ループの配列内の項目の特定のプロパティを表します。このプロパティの値はリスト内の唯一の文字列または数値である必要があり、動的に変更することはできません。

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

wx:key が指定されていない場合は、警告が表示されます。報告される、リストが静的であることが確実にわかっている場合、またはリストの順序を気にしない場合は、リストを無視することを選択できます。

2. ケース

1. ユーザーセンターリスト

WeChatミニプログラムリスト開発の詳細な説明

関連記事