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コンテナデータをコピーしてバックアップする方法の詳細な説明

推薦する

Google 翻訳ツール: 多言語ウェブサイトを素早く実装

Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...

NodeJs の高メモリ使用量のトラブルシューティング実戦記録

序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

JavaScriptで継承を実装するいくつかの方法

目次構造継承(callで実装)プロトタイプチェーン継承(プロトタイプチェーンの助けを借りて実装)複合...

iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...

SQL文のパフォーマンスを分析するための標準的な要約

この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...

Vueは動的に生成されたコンポーネントをドラッグアンドドロップする要件を実装します

目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...

Vant+postcss-pxtoremはブラウザ適応機能を実装します

Remレイアウトの適応Vant のスタイルでは、デフォルトで px を単位として使用します。rem ...

MySQL シリーズ: MySQL リレーショナル データベースの基本概念

目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...

HTMLページの読み込み速度を上げる方法

(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...

html-webpack-plugin の使用方法の詳細な説明

最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...

マウス追従ゲームを実現するjs

この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...

HTML で選択ドロップダウン ボックスのコンテンツが不完全に表示され、部分的にカバーされる問題の解決策

今日、問題が発生しました。クエリ バーのドロップダウン ボックスの内容が長すぎて、一部が隠れてしまっ...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

MacOS Catalina アップグレード後の VMware ブラック スクリーン問題に対する完璧な解決策の詳細な説明

MacOS Catalina アップグレード後の VMware ブラック スクリーンに対する完璧なソ...