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

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

1. 知識ポイント

(1). wx:for

tip:wx:for=“array”可以等于参数名，在js中调用
Page({ data:{
array: [{name: '小李'},{ name: '小高'}]}
 })，获取值；也可以直接把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: 'foo',
      },{
        message: 'bar'
      }]
    }
})

まず、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: '小李',
      },{
        name: '小高'
      }]
    }
})

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 も タグで使用して、複数のノードを含む構造ブロックをレンダリングできます。

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

var app = getApp()
Page({
    data:{
      array: [{
        name: '小李',
      },{
        name: '小高'
      }]
    }
})

(3).wx:key

1. リスト内の項目の位置が動的に変更されるか、新しい項目がリストに追加され、リスト内の項目が独自の状態を維持するようにしたい場合特性とステータス ( の入力内容、 の選択状態など) を取得するには、wx:key を使用してリスト内の項目の一意の識別子を指定する必要があります。

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

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

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

2. ケース

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

関連推奨事項:

WeChat アプレットは画像適応幅を実装します

WeChat アプレットはレコーダー、オーディオ再生、アニメーションを開発します

WeChatアプレット開発ポップアップボックス実装方法🎜🎜

以上がWeChatミニプログラムリスト開発の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。