在进行列表数据展示的时候,如果数据比较多或者更新比较快,就需要提供上拉刷新和下拉加载的功能,让提升用户的体验。【相关学习推荐:小程序开发教程】
下拉刷新及上拉加载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框架:
//在小程序项目目录中执行下面的函数 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的组件特性,根据触发的时机来控制记载组件的显隐,整体实现并不是很难,具体代码可根据自己的实际情况做适当调整哦。
更多编程相关知识,请访问:编程视频!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。