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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法
>>: Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明
Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...
序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...
目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...
目次構造継承(callで実装)プロトタイプチェーン継承(プロトタイプチェーンの助けを借りて実装)複合...
現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...
この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...
目次製品要件アイデア問題ライブラリ選択をドラッグコンポーネントを生成する方法コンポーネントを生成する...
Remレイアウトの適応Vant のスタイルでは、デフォルトで px を単位として使用します。rem ...
目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...
(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...
最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...
今日、問題が発生しました。クエリ バーのドロップダウン ボックスの内容が長すぎて、一部が隠れてしまっ...
テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...
MacOS Catalina アップグレード後の VMware ブラック スクリーンに対する完璧なソ...