この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 2つのページング方法通常のページング効果では、ページの下部に次のページと前のページをクリックするためのボタンが表示されます。データを取得するためのインターフェイスは、ボタンをクリックした後にのみトリガーされます。この方法は、通常、優れたユーザー エクスペリエンスを提供します。 もう 1 つのページング効果では、ユーザーがボタンをクリックする必要はありません。現在のページの最後の数個のデータを閲覧すると、システムが自動的に次のページのデータを取得してページに表示するリクエストを送信し、無限スクロールに似た効果を実現できます。 csdnを例にとると、スクロールバーがこの場所に到達すると、自動的に次のページのデータを要求するためのインターフェイスが呼び出され、読み込まれたデータリストに蓄積されます。 実装のアイデアスクロール ページング方式には問題があります。ユーザーが非常に高速にスクロールすると、最初のリクエストが完了する前に 2 番目のリクエストが開始する場合があります。この問題を回避するには、ロック フラグを追加し、リクエストの送信後にロックし、リクエストが完了したらロックを解除します。これにより、この問題を完全に回避できます。 実装のアイデアを得る 1. ロードできるデータがあるかどうかを確認します コードの実装まずページングオブジェクトが必要です クラスページング{ page //現在のページ番号を記録します count //表示されているページ数を記録します req //インターフェースリクエストオブジェクト(ここではカプセル化していますが、必要に応じてプロパティを定義できます) url // リクエスト パス moreData = true // 次のページのデータはありますか? (デフォルトでは、リクエストが初めて行われたときに次のページのデータが存在します) accumulator = [] // 読み込まれたデータリスト locker = false // ロックフラグ} ページングオブジェクトのコンストラクタを定義します。これは、デフォルトで最初のページからリクエストを開始し、ページごとに5つのデータ項目を持ちます。 コンストラクター(req, ページ=0, カウント=5){ this.page = ページ this.count = カウント this.req = 要求 this.url = 必須のurl } 次にgetMoreDataメソッドを記述します より多くのデータを取得する(){ //1. 次のデータ ページが存在するかどうかを確認します//2. ロックを取得し、ロックが解除されているかどうかを確認します//3. データを要求する//4. ロックを解除します} 1. 次のページのデータがあるかどうかを確認します ここでは判断のためにmoreData属性を直接取得します if(!this.moreData){ 戻る } 2. 鍵を手に入れる ここで新しいメソッドが追加されます。現在ロックされていない場合は、引き続きデータを要求できることを意味します。データを要求する前に、ロック フラグを true に設定して、次の要求が送信され続けるのを防ぎます。 _getLocker(){ if(this.locker){ 偽を返す } this.locker = true 真を返す } 3. データのリクエスト ページに返すために必要なデータ構造は次のとおりです。 { empty, // 空ですか? items, // 現在のページのデータ moreData, // 次のページのデータはありますか accumulator // 要求されたすべてのデータ} まずリクエスト構造を取得するメソッドを定義する _getCurrentReq(){ url = this.url とします。 //リクエストパラメータを設定する const params = `page=${this.page}&count=${this.count}` //スプライシング方法を判断する if(url.includes('?')){ url += '&' + パラメータ }それ以外{ url += '?' + パラメータ } this.req.url = URL これを返す。 } データの取得方法は以下の通りです。 _actualGetData(){ const req = this._getCurrentReq() //特定のリクエストコンテンツを取得します。let paging = Http.request(req) //カスタムツールのリクエストメソッドを呼び出してデータを取得します。//結果が取得されない場合は、直接 null を返します。 if(!ページング){ nullを返す } ページング合計が 0 の場合 戻る { 空: true、 アイテム: [], 詳細データ: false、 アキュムレータ: [] } } //現在のページ番号が合計ページ番号より小さい場合は、次のページのデータがまだあることを意味します。moreData を true に設定し、そうでない場合は false に設定します。 this.moreData = pageNum < totalPage-1 ? true : false //次のページのデータがある場合は、次の取得を容易にするためにページを1増やします。if (this.moreData) { このページ += 1 } //ウォーターフォールフロー表示データを蓄積する必要があるため、データリストも蓄積する必要があります this.accumulator = this.accumulator.concat(paging.items) 戻る { 空: false、 アイテム: paging.items、 詳細情報: this.moreData、 アキュムレータ: this.accumulator } } 4. ロックを解除する ロックを解除するには、ロック識別子の状態を変更するだけです。 this.locker = false getMoreDataメソッドが記述され、対応するインターフェースのjsファイルで呼び出すことができます。 インターフェースに最初に入ったときに一度自動的に呼び出され、その後ユーザーが下部に触れるたびに再度呼び出される必要がある。 initBottomSpuList(){ //ページングオブジェクトを取得する const paging = new Paging({ URL: URL }) //ページングオブジェクトをjsデータに保存します。this.data.spuPaging = paging //メソッドを呼び出す const data = paging.getMoreData() if(!データ){ 戻る } // ウォーターフォールフローを再読み込みします wx.lin.renderWaterFlow(data.items) }, WeChat アプレットには、下部をタッチすると自動的にトリガーされる独自の機能があります。この関数にメソッド呼び出しコードを記述するだけです。 onReachBottom: 関数 () { 定数データ = this.data.spuPaging.getMoreData() if(!データ){ 戻る } // ウォーターフォールフローを再読み込みします wx.lin.renderWaterFlow(data.items) } この時点で、ウォーターフォールフローのページングスクロール読み込みの効果を実現できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQLテーブルのテーブル構造を素早く変更する方法
ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...
目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...
Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
目次1. プロジェクト構築2: ディレクトリ構造3: コンポジションAPI 4: 基本的な使い方:最...
効果画像: html: <div class='site_bar'>ホー...
Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...
最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...
インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...
概要async/await と Promise の基本的な違いは、await fn() は現在の関数...
目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...
1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...