浅议小程序中下拉刷新与上拉加载功能的实现方式及代码示例- 技术文档

浅议小程序中下拉刷新与上拉加载功能的实现方式及代码示例

why 353 2024-06-25 09:38:02

本篇文章给大家介绍一下小程序中实现下拉刷新和上拉加载功能的方法，希望对大家有所帮助！

浅谈小程序中下拉刷新和上拉加载功能怎么实现？（附代码）

在进行列表数据展示的时候，如果数据比较多或者更新比较快，就需要提供上拉刷新和下拉加载的功能，让提升用户的体验。

下拉刷新及上拉加载wxml文件编写

当我们使用scroll-view滑动组件展示列表时，其本身就存在下拉刷新和上拉加载的触发函数

<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:滚动到顶部/左边时触发,这里设置滚动到顶部需要触发的函数
bindscrolltolower：滚动到顶部/右边时触发

引入line-ui框架

这里我使用的下拉刷新和上拉加载展示组件是lin-ui框架提供的，这里我说下如何引入lin-ui框架：

lin-ui官方文档地址

1 2	`//在小程序项目目录中执行下面的函数` `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//顶部加载展示控制
  },

首先在data中设置加载组件是否显示，默认都不显示

下拉刷新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(&#39;下拉刷新加载完成.&#39;);
  }, 500);
  },
     
      //更新数据
   updateData:function(tail, callback) {
   
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + &#39;compony-detail/page&#39;,
      method: &#39;GET&#39;,
      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(&#39;上拉数据加载完成.&#39;);
 }, 1000);
 },
    
     loadData: function(tail, callback) {
   var that = this;
   wx.request({
     url: app.gBaseUrl + &#39;compony-detail/page&#39;,
     method: &#39;GET&#39;,
     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();
       }
     }
   })
 },