WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します (過剰なデータが読み込まれ、重複したデータが存在する場合もあります)。

問題の説明:一度引き上げると、ボトミング関数 onReachBottom() が複数回トリガーされます。loadMore() などのカスタムのロード関数に変更しても、問題は依然として存在します。

実稼働環境:この問題は、デバッグ ベース ライブラリの最新バージョン 1.9.94 でも依然として存在します。

解決策:状態制御変数を追加して、ボトミング機能/追加機能のロードのトリガー条件を制限します。

ページをプルアップしてさらに読み込むと、以下の画像のように重複したデータがあります。

一般的なフロントエンド wxml コード search.wxml

<!--pages/shop/search.wxml-->
<スクロールビュー scroll-y="true" style="height:{{windowHeight}}px;" bindscrolltolower="onReachBottom">

      <!-- 製品リスト -->
      <view class="flex-wrp">
         <block wx:for="{{items}}">
            <view bindtap="onItemClick" class="item-box" data-iid="{{item.id}}"> 
               <image class="item-pic" src="{{item.thumb}}" mode="aspectFill"></image>
               <view class="item-info">
                  <view class='item-name'>{{item.name}}</view>
                  <view class='price-sold-box'>
                     <text class='current-price'>¥{{item.current_price}}</text>
                     <text class='item-sold'><text class='sold-title'>販売量</text> {{item.sold_num}}</text> 
                  </ビュー>
               </ビュー>
            </ビュー> 
         </ブロック> 
      </ビュー>
      <view wx:if="{{pageEnd==true}}" class='scrollEnd'>すべてのデータが表示されました...</view>
</スクロールビュー>

テストケース 1 search.js の初見 (未修正のバグ)

//ページ/ショップ/パブリック/検索/検索.js
/* バグのある JS ユースケース */

const app = getApp();
var page = 0; //ページタグ Page({
   データ: {
      pageEnd:false, //ページの下部ですか? windowHeight: app.getWH(), //アプリケーションの高さ // 製品リスト配列 items:[],
   },

   /**************************** システムとページ機能 ****************************/
   //ページの読み込み onLoad: function (options) {
      //まずthis.getServerItems(page);を読み込みます
   },
   // 下部タッチ機能(上に引っ張るとさらに読み込みます)
   onReachBottom: 関数 () {
      this.getServerItems(ページ);
   },

   /************************ ネットワーク要求****************************/
   /**
    * サーバー製品リストを取得します * @param {string} page paging default 0
    */
   getServerItems: 関数 (pg) {
      var tar = this;
      //デフォルト値を設定 pg = pg ? pg : 0;
      wx.showLoading({//トーストを表示
         タイトル: '読み込み中...',
      });
      //ネットワークリクエスト wx.request({
         URL: "https://xxx.com/api/items/search",
         データ: {ページ: pg},
         メソッド: 'POST'、
         ヘッダー: { 'content-type': 'application/x-www-form-urlencoded' },
         成功: function (res){//ネットワーク要求が成功しました if (res.data.status == 1){//新しいデータがあります var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  アイテム: arr、
               });
               ページ++;

            } else{//res.data.status == 0 新しいデータはありません tar.setData({
                  pageEnd:true, //ページ下部の情報を表示する})
            }

         },
         エラー: 関数 (e){//ネットワーク要求が失敗しました console.log(e);
         },
         complete: function(c){//ネットワークリクエストが完了しました wx.hideLoading();//トーストを非表示にします
         }
      })

   },

バグを修正し、上記のsearch.jsに下部関数制御変数canUseReachBottomを追加します

//ページ/ショップ/パブリック/検索/検索.js
/* バグを修正した後の JS 使用例 */

const app = getApp();
var ページ = 0;
/* ------------------------- */
var canUseReachBottom = true; //ボトムタッチ機能制御変数 /* ------------------------- */
ページ({
   データ: {
      ページ終了:false、 
      ウィンドウの高さ: app.getWH(),
       アイテム:[],
   },
   onLoad: 関数 (オプション) {
      this.getServerItems(ページ);
   },
   // 下部タッチ機能(上に引っ張るとさらに読み込みます)
   onReachBottom: 関数 () {
      /* ------------------------- */
        if(!canUseReachBottom) return; // ボトミング機能が利用できない場合、ネットワーク要求データは呼び出されません /* ------------------------- */
      this.getServerItems(ページ);
   },
   ServerItems: 関数 (pg) {
      /* ------------------------- */
        canUseReachBottom = false; // 下部タッチ機能を閉じる /* ------------------------- */
      var tar = this;
      pg = pg ? pg : 0;
      wx.showLoading({
         タイトル: '読み込み中...',
      });
      wx.リクエスト({
         URL: "https://xxx.com/api/items/search",
         データ: {ページ: pg},
         メソッド: 'POST'、
         ヘッダー: { 'content-type': 'application/x-www-form-urlencoded' },
         成功: 関数 (res) {
            if (res.data.status == 1){//新しいデータがあります var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  アイテム: arr、
               });
               ページ++;
              /* ------------------------- */
                canUseReachBottom = true; //新しいデータがあり、底打ち機能がオンになり、次の底打ちコールの準備が整いました /* ------------------------- */
            } それ以外 { 
               tar.setData({
                  ページ終了:true、
               })
            }

         },
         エラー: 関数 (e) {
            コンソールログ(e);
         },
         完了: 関数(c){
            wx.hideLoading();
         }
      })

   },

概要: このバグの原因は、ボトミング機能がトリガーされた後、ネットワーク データが要求される -> ミニ プログラムがデータをフロント エンドにレンダリングすることである可能性があります。この 2 つのプロセスは時間がかかるため、フロント エンドはレンダリングを完了する時間がなく、ボトミング機能はフロント エンド ページがまだ最下部にあると判断し、ボトミング機能を再度または複数回トリガーします。その結果、データが繰り返しロードされることになります。

モバイルアプリ開発版のvConsoleを見ても確認できます。一度プルアップすると、3 つのネットワーク リクエストが連続して開始され、その後、サーバーは遅延しながら成功結果を 1 つずつ返します。図に示すように:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレット実装プルアップ読み込み機能の例[さらにデータを読み込む/下部に読み込む/クリックしてさらにデータを読み込む]
  • WeChatアプレットでデータベースから実際のデータをロードする方法
  • ECharts を使用してデータを非同期的に読み込み、WeChat アプレットでチャート機能を実装する
  • ECharts を使用して WeChat アプレットでデータを非同期的にロードする方法
  • WeChatアプレットはメニュー追従効果とループネストされた読み込みデータを実装します
  • WeChatアプレットページのスライド画面の読み込みデータ効果
  • WeChat アプレットは、上にスライドして読み込み、下にプルして更新します (onscrollLower) がデータを一括して読み込みます (パート 2)
  • WeChat アプレットは、上にスライドして読み込み、下にプルして更新します (onscrollLower)。データをバッチで読み込みます (I)
  • WeChat アプレットの動的データ読み込みサンプルコード

<<:  Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

>>:  Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明

推薦する

CSS を解析して画像のテーマカラー機能を抽出する (ヒント)

背景すべては、WeChat 技術グループのクラスメートが「写真の主な色を取得する方法はあるか」と尋ね...

VMware 仮想マシンのインストール Apple Mac OS の超詳細なチュートリアル

目次要約する仕事の都合で Apple の Mac OS に対応するソフトウェアをインストールする必要...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

MySQLデータベースの名前を高速かつ安全に変更する方法(3種類)

目次MySQLデータベースの名前を変更する方法最初の方法: データベースの名前を変更することは非推奨...

Linux テキスト検索コマンド find の詳細な使用方法

find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...

Linux QT Kit が見つからない、バージョンが空の問題の解決策

現在このような問題が発生しています 私の状況は、QT が動かなくなってしまったため、仮想マシンを再起...

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

CSS によるテキストの切り捨てテキストを自動的に切り捨てるスタイル コードを実装するには、次のコー...

JavaScript における async と await の使い方とメソッド

JS の async 関数と await キーワード 関数ヘルワールド() { 「こんにちは!美しい...

HTML要素によるFlashブロックの詳細な例

コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...

ボックスモデルのサイズの詳細な説明は、パディング、マージン、境界の値によって異なります。

ボックス モデルは、要素ボックスの幅と高さ、パディング、境界線、余白のサイズを指定します。境界線の内...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

モバイルデバイス Web 開発における HTML ヘッドの書き方

コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...