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

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

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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

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

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

-

scroll-y: 是否允许纵向滚动，默认为false,这里我们设置为trueupper-threshold: 距顶部/左边多远时，触发 scrolltoupper 事件（下拉刷新）bindscrolltoupper:滚动到顶部/左边时触发,这里设置滚动到顶部需要触发的函数bindscrolltolower：滚动到顶部/右边时触发

引入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的组件特性，根据触发的时机来控制记载组件的显隐，整体实现并不是很难，具体代码可根据自己的实际情况做适当调整哦。

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。