この記事では、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テーブルのテーブル構造を素早く変更する方法
最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...
今回は、実行中のコンテナをイメージにパッケージ化して Alibaba Cloud にアップロードし、...
MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...
目次要約する <テンプレート> <div> 要素 <h2>{{メ...
OOM は「Out Of Memory」の略で、メモリオーバーフローを意味します。メモリ オーバーフ...
01PARTCoreWebApiチュートリアルローカルデモ環境Visual Studio2019--...
Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...
この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...
この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...
目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...
MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...
nginx バージョン 1.11.3次の構成を使用すると、検証は無効になり、クロスドメインの問題が依...
車輪の再発明として、ここでは再パッケージ化を使用して Docker ベースの Hadoop イメージ...
目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...