This article will introduce to you how to implement the pull-down refresh and pull-up loading functions in the mini program. I hope it will be helpful to you!

When displaying list data, if there is a lot of data or it updates quickly, you need to provide pull-up refresh and pull-down loading functions to improve the user experience. [Related learning recommendations: 小program development tutorial]

Pull down to refresh and pull up to load wxml file writing

When we use scroll-view to slide When the component displays the list, it itself has trigger functions for pull-down refresh and pull-up loading

<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: Whether to allow vertical scrolling, the default is false, here we set it to true
• upper-threshold: How far away from the top/left is, the scrolltoupper event is triggered (pull down to refresh)
• bindscrolltoupper: Triggered when scrolling to the top/left, here set the function that needs to be triggered when scrolling to the top
• bindscrolltolower: Triggered when scrolling to the top/right

Introducing the line-ui framework

Here I use the pull-down refresh and The pull-up loading display component is provided by the lin-ui framework. Here I will talk about how to introduce the lin-ui framework:

lin-ui official document address

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

Then Introduce it in the json file of the page where the component needs to be introduced

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

In this way, the lin-ui component is introduced successfully

js code writing

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

First set whether to display the loading component in the data. By default, it will not be displayed.

Pull down to refresh js code

//下拉刷新
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();
        }
      }
    })
   },

Pull up to load js Code

 /**
   * 滑動到底部加載更多
   */
  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();
        }
      }
    })
  },

We have already implemented the entire pull-down refresh and pull-up loading functions. We mainly use the component characteristics of scroll-view to control the display and concealment of the recording component according to the triggering time. Overall It is not difficult to implement, and the specific code can be adjusted appropriately according to your actual situation.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on how to implement the pull-down refresh and pull-up loading functions in mini programs? (with code). For more information, please follow other related articles on the PHP Chinese website!