この記事では、ミニプログラムにプルダウンリフレッシュ機(jī)能とプルアップロード機(jī)能を?qū)g裝する方法を紹介します。

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

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

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

<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 に設(shè)定します
• upper-threshold: 上/左からどのくらい離れているか、scrolltoupper イベントがトリガーされます (プルダウンして更新します)
• bindscrolltoupper: までスクロールするとトリガーされます上/左、ここで上にスクロールするときにトリガーされる必要がある関數(shù)を設(shè)定します
• bindsrollto lower: 上/右にスクロールするときにトリガーされます

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

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

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

//在小程序項(xiàng)目目錄中執(zhí)行下面的函數(shù)
npm install lin-ui

次に、コンポーネントを?qū)毪工氡匾ⅳ毳讴`ジの json ファイルに導(dǎo)入します

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

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

js コードの記述

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

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

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

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("還沒刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData為自己的數(shù)據(jù)更新邏輯代碼
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加載完成.');
  }, 500);
  },
    
      //更新數(shù)據(jù)
   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 を読み込みますコード

 /**
   * 滑動(dòng)到底部加載更多
   */
  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('上拉數(shù)據(jù)加載完成.');
  }, 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();
        }
      }
    })
  },

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

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

以上がミニ プログラムでプルダウン リフレッシュ機(jī)能とプルアップ ロード機(jī)能を?qū)g裝する方法について簡単に説明します。 (コード付き)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。