WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します

WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します

この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

2つのページング方法

通常のページング効果では、ページの下部に次のページと前のページをクリックするためのボタンが表示されます。データを取得するためのインターフェイスは、ボタンをクリックした後にのみトリガーされます。この方法は、通常、優れたユーザー エクスペリエンスを提供します。

もう 1 つのページング効果では、ユーザーがボタンをクリックする必要はありません。現在のページの最後の数個のデータを閲覧すると、システムが自動的に次のページのデータを取得してページに表示するリクエストを送信し、無限スクロールに似た効果を実現できます。

csdnを例にとると、スクロールバーがこの場所に到達すると、自動的に次のページのデータを要求するためのインターフェイスが呼び出され、読み込まれたデータリストに蓄積されます。

実装のアイデア

スクロール ページング方式には問題があります。ユーザーが非常に高速にスクロールすると、最初のリクエストが完了する前に 2 番目のリクエストが開始する場合があります。この問題を回避するには、ロック フラグを追加し、リクエストの送信後にロックし、リクエストが完了したらロックを解除します。これにより、この問題を完全に回避できます。

実装のアイデアを得る

1. ロードできるデータがあるかどうかを確認します
2. 鍵を手に入れる
3. リクエストを送信し、インターフェースを呼び出す
4. ロックを解除する
5. データを返す

コードの実装

まずページングオブジェクトが必要です

クラスページング{
  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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード
  • ミニプログラムのウォーターフォールフローコンポーネントは、ページめくりと画像の遅延読み込みを実現します。
  • ミニプログラムでシンプルな2列のウォーターフォール効果を実装する
  • WeChatアプレットはjsを通じてウォーターフォールフローレイアウトを実装します
  • ウェブページとWeChatアプレットページにウォーターフォール効果を実装する
  • WeChatアプレットでウォーターフォールレイアウトと無限読み込みを実装する方法の詳細な説明
  • WeChat ミニプログラムで切り捨てられたウォーターフォール コンポーネントを実装するためのサンプル コード

<<:  MySQLデータのセキュリティを確保するための提案

>>:  MySQLテーブルのテーブル構造を素早く変更する方法

推薦する

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

Dockerコンテナを更新、パッケージ化、Alibaba Cloudにアップロードする方法

今回は、実行中のコンテナをイメージにパッケージ化して Alibaba Cloud にアップロードし、...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

MySQL OOM (メモリオーバーフロー) の解決策

OOM は「Out Of Memory」の略で、メモリオーバーフローを意味します。メモリ オーバーフ...

MySQLの構文、特殊記号、正規表現の詳細な説明

Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

22 Vue 最適化のヒント (プロジェクトの実践)

目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...

MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明

MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...

無効な Nginx クロスドメイン設定 Access-Control-Allow-Origin の解決策

nginx バージョン 1.11.3次の構成を使用すると、検証は無効になり、クロスドメインの問題が依...

DockerでHadoopを実行しイメージを作成する方法

車輪の再発明として、ここでは再パッケージ化を使用して Docker ベースの Hadoop イメージ...

MySQL で SQL 文の実行時間を表示する方法

目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...