ミニ プログラムでプルダウン リフレッシュ機能とプルアップ ロード機能を実装する方法について簡単に説明します。 (コード付き)

この記事では、ミニプログラムにプルダウンリフレッシュ機能とプルアップロード機能を実装する方法を紹介します。

リストデータを表示する際、データ量が多い場合や更新が早い場合は、ユーザーの利便性を向上させるためにプルアップ更新やプルダウン読み込み機能を提供する必要があります。経験。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]

プルダウンして更新し、プルアップして wxml ファイルの書き込みをロードします

スクロールを使用する場合-view to slide コンポーネントがリストを表示するとき、コンポーネント自体にプルダウンの更新とプルアップの読み込みのためのトリガー関数があります。

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加载中">
</l-loadmore>

• scroll-y: 垂直スクロールを許可するかどうか。デフォルトは false です。ここでは true に設定します
• upper-threshold: 上/左からどのくらい離れているか、scrolltoupper イベントがトリガーされます (プルダウンして更新します)
• bindscrolltoupper: までスクロールするとトリガーされます上/左、ここで上にスクロールするときにトリガーされる必要がある関数を設定します
• bindsrollto lower: 上/右にスクロールするときにトリガーされます

line-ui フレームワークの紹介

ここではプルダウン更新を使用し、プルアップ読み込み表示コンポーネントは lin-ui フレームワークによって提供されています。 lin-ui フレームワークを導入します:

lin-ui 公式ドキュメントのアドレス

//在小程序项目目录中执行下面的函数
npm install lin-ui

次に、コンポーネントを導入する必要があるページの json ファイルに導入します

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },

このようにして、lin-ui コンポーネントが正常に導入されました

js コードの記述

#

data: {
    downfresh:false,//底部加载展示控制
    upfresh:false//顶部加载展示控制
  },

まず、次のようにするかどうかを設定しますデータ内の読み込みコンポーネントを表示します。デフォルトでは表示されません。

プルダウンして js コードを更新します

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("还没刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData为自己的数据更新逻辑代码
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加载完成.');
  }, 500);
  },
    
      //更新数据
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },

プルアップして js を読み込みますコード

 /**
   * 滑动到底部加载更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("还没加载完成")
      return;
    }
   var that = this;
    this.setData({
      downfresh: true,
      // upfresh:false
    })
   
    this.setData({
      downloadingData: true
      // upfresh:false
    })

    setTimeout(function() {
      that.loadData(true,()=>{
        that.setData({
        downfresh: false
      });
     })
      // wx.hideLoading();
    console.info('上拉数据加载完成.');
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: that.data.componys.length,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        // console.log(JSON.stringify(res.data))
        that.setData({
          componys: that.data.componys.concat(res.data),
        });
        if (callback) {
          callback();
        }
      }
    })
  },

プルダウン更新機能とプルアップ読み込み機能は既に実装済みですが、主にスクロールビューのコンポーネント特性を使用して、記録コンポーネントの表示と非表示を制御します。全体的に実装は難しくなく、実際の状況に応じて特定のコードを適切に調整できます。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がミニ プログラムでプルダウン リフレッシュ機能とプルアップ ロード機能を実装する方法について簡単に説明します。 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。