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

推薦する

Nginx 仮想ホストを構成する 3 つの方法 (ポートベース) の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...

AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...

Vue 組み込みコンポーネントのキープアライブでの LRU アルゴリズムの使用

目次Vue の keep-alive 組み込みコンポーネントの使用でもこのアルゴリズムが使用されます...

HTML5で見逃せないAPIやヒントのまとめ

これまでのブログ投稿では、HTML 5 ではあまり使われていないが注目すべき API やヒントに焦点...

LinuxはRsync+Inotifyを使用してローカルとリモートのデータのリアルタイム同期を実現します。

0x0 テスト環境本社本番サーバーと支社バックアップサーバーはリモートデータバックアップが必要です...

MySQL 演算子の具体的な使用法 (and、or、in、not)

目次1. はじめに2. 本文2.1 および演算子2.2 または演算子2.3 オペレーター2.4 no...

JS+Canvas が抽選ホイールを引く

この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...

MySQL データベースの詳細な説明 (Ubuntu 14.0.4 LTS 64 ビットベース)

1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...

MySQL インデックス最適化の説明

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)

目次設計シナリオ技術的なポイントサーバー情報準備フルバックアップスクリプト(Mysql-FullyB...

Ubuntu 18.04の下のディレクトリにディスクをマウントします

導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...

MySQLにおける遅いSQLの最適化の方向性について詳しく話しましょう

目次序文SQL文の最適化遅いクエリSQLを記録する設定を変更する方法スロークエリログを表示するSQL...

MacでのMySQL初期化パスワード操作

Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...