广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

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

在进行列表数据展示的时候，如果数据比较多或者更新比较快，就需要提供上拉刷新和下拉加载的功能，让提升用户的体验。【相关学习推荐：小程序开发教程】

当我们使用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>

引入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//顶部加载展示控制  },

首先在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('下拉刷新加载完成.');  }, 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();        }      }    })  },

整个下拉刷新和上拉加载的功能我们就已经实现了，主要就是利用到了scroll-view的组件特性，根据触发的时机来控制记载组件的显隐，整体实现并不是很难，具体代码可根据自己的实际情况做适当调整哦。

更多编程相关知识，请访问：编程视频！！

以上就是浅谈小程序中下拉刷新和上拉加载功能怎么实现？（附代码）的详细内容，更多请关注9543建站博客其它相关文章！