本篇文章给大家介绍一下小程序中实现下拉刷新和上拉加载功能的方法，希望对大家有所帮助！
在进行列表数据展示的时候，如果数据比较多或者更新比较快，就需要提供上拉刷新和下拉加载的功能，让提升用户的体验。
下拉刷新及上拉加载wxml文件编写
当我们使用scroll-view滑动组件展示列表时，其本身就存在下拉刷新和上拉加载的触发函数
<scroll-viewclass="scroll"scroll-y="{{true}}"upper-threshold="50"bindscrolltoupper="refresh"style="height:700px"><l-loadmoreshow="{{upfresh}}"bindscrolltolower="getMore"type="loading"loading-text="拼命刷新中"></l-loadmore><l-loadmoreshow="{{downfresh}}"type="loading"loading-text="拼命加载中"></l-loadmore>
scroll-y: 是否允许纵向滚动，默认为false,这里我们设置为true
upper-threshold: 距顶部/左边多远时，触发 scrolltoupper 事件（下拉刷新）
bindscrolltoupper:滚动到顶部/左边时触发,这里设置滚动到顶部需要触发的函数
bindscrolltolower：滚动到顶部/右边时触发
引入line-ui框架
这里我使用的下拉刷新和上拉加载展示组件是lin-ui框架提供的，这里我说下如何引入lin-ui框架：lin-ui官方文档地址
//在小程序项目目录中执行下面的函数npminstalllin-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;}varthat=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){varthat=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.downloadingDataif(this.data.downfresh){console.log("还没加载完成")return;}varthat=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){varthat=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的组件特性，根据触发的时机来控制记载组件的显隐，整体实现并不是很难，具体代码可根据自己的实际情况做适当调整哦。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：http://www.chanpinyuan.cn/43024.html；
