WeChat アプレット開発リスト プルアップからロード プルダウンからサンプル コードを更新

この記事では、WeChat アプレット リストをロードするプルアップと更新するプルダウンの例を主に紹介します。必要な友人は参考にしてください。

1. リスト (この部分の内容は公式ドキュメントからのものです)

この機能の場合、WeChat アプレットは Android の listview プロパティと同様のコントロールを提供しないため、wx:for コントロールを使用する必要があります。属性を使用して配列をバインドし、配列内の各項目のデータを使用してコンポーネントを繰り返しレンダリングして、リストの効果を実現します。

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

Page({
 data: {
 array: [{
  message: 'foo',
 }, {
  message: 'bar'
 }]
 }
})

デフォルトでは、配列の現在の項目の添字変数名はデフォルトでindexになり、配列の現在の項目の変数名はデフォルトでitemになります。 wx:for-item および wx:for-index を通じて指定されます。

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

wx:for もネストできます。以下は乗算表です

<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>

block wx:for

block wx:if と同様に、wx:for も 5c430a809a89b318bd21fd4040f8548c、698d939a2c9041f2302734cfeb04788e の選択状態など)、wx:key を使用してリスト内の項目の一意の識別子を指定する必要があります。

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

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

2. 予約されたキーワード *this は、for ループ内の項目自体を表します。この表現では、項目自体が次のような一意の文字列または数値である必要があります。
データが変更されると、レンダリング レイヤが再レンダリングされます。キーを持つコンポーネントの場合、フレームワークは、コンポーネントが独自の状態を維持し、リストのレンダリングの効率を向上させるために、コンポーネントが再作成されるのではなく順序が変更されることを保証します。

wx:key が指定されていない場合、リストが静的であることが明確にわかっている場合、またはその順序に注意を払う必要がない場合は、警告を無視することを選択できます。

サンプルコード:

<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>

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
 })
 }
})

2. プルダウン更新

アプレットページは、ドロップダウン関数を統合し、コールバックを取得するためのインターフェイスを提供するだけです。イベント。

1. .json ファイルで設定する必要があります。 (.json ファイルの形式と、app.json と特定のページの .json ファイルの違いについては前述しました。質問がある場合は、次に進んでください。) app.json ファイルで構成されている場合、その後、プログラム全体をプルダウンして更新できます。特定のページの .json ファイルに記述されている場合、それは対応するページであり、プルダウンして更新できます。

特定のページの .json ファイル:

{
 "enablePullDownRefresh": true
}

app.json ファイル:

"window": {
 "enablePullDownRefresh": true
 }

2. js ファイルにコールバック関数を追加します

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // do somthing
 },

3.通常、プルダウン更新操作は、ページにデータの最新ページが表示されるようにクエリ条件をリセットすることです。以下は作者のデモにおけるプルダウンリフレッシュコールバックインターフェースのコードであり、一般的な動作プロセスでもあります。

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 刷新时需把total重置为0，代表重新从第一条请求。
  total = 0; 
  // this.data.dataArray 是页面中绑定的数据源
  this.data.dataArray = [];
  // 网络请求，重新请求一遍数据
  this.periphery();
  // 小程序提供的api，通知页面停止下拉刷新效果
  wx.stopPullDownRefresh;
 },

3. プルアップロード

プルダウンリフレッシュと同様に、ミニプログラムはプルアップ中のコールバック用のインターフェースも提供します。公式ドキュメントには詳細な説明がありません。テストの結果、プルアップ コールバック インターフェイスには追加の構成が必要ないことがわかりました (プルダウンする場合は、.json ファイルで "enablePullDownRefresh": true を構成する必要があります)。ページが一番下にスライドすると直接アクティブ化され、コールバックを取得できます。

1. jsファイルにコールバック関数を追加します

 // 上拉加载回调接口
 onReachBottom: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。
  total += count;
  // 网络请求
  this.periphery();
 },

以上がWeChat アプレット開発リスト プルアップからロード プルダウンからサンプル コードを更新の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。