A brief discussion on how to implement the pull-down refresh and pull-up loading functions in mini programs? (with code)

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

//在小程序项目目录中执行下面的函数
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为自己的数据更新逻辑代码
      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();
        }
      }
    })
   },

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('上拉数据加载完成.');
  }, 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!