本篇文章给大家介绍一下小程序中实现下拉刷新和上拉加载功能的方法，希望对大家有所帮助！
在进行列表数据展示的时候，如果数据比较多或者更新比较快，就需要提供上拉刷新和下拉加载的功能，让提升用户的体验。
下拉刷新及上拉加载wxml文件编写
当我们使用scroll-view滑动组件展示列表时，其本身就存在下拉刷新和上拉加载的触发函数
1 2 3 4 5 6 7 | <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官方文档地址
然后在需要引入组件的页面的json文件中进行引入
1 2 3 4 | "usingComponents": {
"l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
"l-loading":"/miniprogram_npm/lin-ui/loading/index",
},
|
这样lin-ui组件就引入成功了
js代码编写
1 2 3 4 | data: {
downfresh:false,
upfresh:false
},
|
首先在data中设置加载组件是否显示，默认都不显示
下拉刷新js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | refresh(){
if(this.data.upfresh){
console.log("还没刷新完成")
return;
}
var that = this;
this.setData({
upfresh: true,
})
setTimeout(function() {
that.updateData(true,()=>{
that.setData({
upfresh: false,
});
})
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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
getMore(){
if(this.data.downfresh){
console.log("还没加载完成")
return;
}
var that = this;
this.setData({
downfresh: true,
})
this.setData({
downloadingData: true
})
setTimeout(function() {
that.loadData(true,()=>{
that.setData({
downfresh: false
});
})
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) => {
that.setData({
componys: that.data.componys.concat(res.data),
});
if (callback) {
callback();
}
}
})
},
|
整个下拉刷新和上拉加载的功能我们就已经实现了，主要就是利用到了scroll-view的组件特性，根据触发的时机来控制记载组件的显隐，整体实现并不是很难，具体代码可根据自己的实际情况做适当调整哦。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
暂时没有评论，来抢沙发吧~