本篇文章给大家介绍一下小程序中实现下拉刷新和上拉加载功能的方法，希望对大家有所帮助！
在进行列表数据展示的时候，如果数据比较多或者更新比较快，就需要提供上拉刷新和下拉加载的功能，让提升用户的体验。【相关搭建系统点我wcqh.cn学习推荐：小程序开发教程】
下拉刷新及上拉加载wxml文件编写
当我们使用scroll-view滑动组件展示列表时，其本身就存在下拉刷新和上拉加载的触发函数
1
2
3
4
5
6
7
<scroll-view clas搭建系统点我wcqh.cns=”scroll” scroll-y=”{{true}}” upper-threshold=”50″
bindscrolltoupper=”refresh” style=”height:700px”搭建系统点我wcqh.cn>
<l-loadmore show=”{{upfresh}}” bindscrolltolower=”getMore” type=”loading” loading-text=”拼命刷新中”>
</l搭建系统点我wcqh.cn-loadmore>
<l-loadmore show=”{{downfresh}}” type=”loading” loading-text=”拼命加载中”>
</l-loadmore>
引入line-ui框架
这里我使用的下拉刷新和上拉加载展示组件是lin-ui搭建系统点我wcqh.cn框架提供的，这里我说下如何引入lin-ui框架：
1
2
//在小程序项目目录中执行下面的函数
npm install lin-ui
然后在需要引入组件的页面的json文件中进搭建系统点我wcqh.cn行引入
1
2
3
4
“usingComponents”: {
“l-loadmore”:”/miniprogram_npm/lin-ui/loadmore/index”,
“l-loading”:”/minip搭建系统点我wcqh.cnrogram_npm/lin-ui/loading/index”,
},
这样lin-ui组件就引入成功了
js代码编写
首先在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
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(“还没搭建系统点我wcqh.cn刷新完成”)
return;
}
var that = this;
this.setData({
upfresh: true,
// upfresh:false
})
setTimeout(function() {
/搭建系统点我wcqh.cn/updateData为自己的数据更新逻辑代码
that.updateData(true,()=>{
that.setData({
upfresh: false,
});
})
// wx.hideLoading搭建系统点我wcqh.cn();
console.info('下拉刷新加载完成.');
}, 500);
},
//更新数据
updateData:function(tail, callback) {
var that =搭建系统点我wcqh.cn this;
console.log(“updatedata-=-=seea”+that.data.searchValue)
wx.request({
url: app.gBaseUrl + 'co搭建系统点我wcqh.cnmpony-detail/page',
method: 'GET',
data: {
page: 0,
count: 20,
componyname:that.data.searchVa搭建系统点我wcqh.cnlue
},
success: (res) => {
this.setData({
componys: res.data
})
if (callback) {
callback();
}
}
})
},
上拉加载j搭建系统点我wcqh.cns代码
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(){
// downloadingData=this.data.downloadingData
if(this.data.downfresh){
console.搭建系统点我wcqh.cnlog(“还没加载完成”)
return;
}
var that = this;
this.setData({
downfresh: true,
// upfresh:false
})
this.setData({
d搭建系统点我wcqh.cnownloadingData: true
// upfresh:false
})
setTimeout(function() {
that.loadData(true,()=>{
that.setData({
d搭建系统点我wcqh.cnownfresh: false
});
})
// wx.hideLoading();
console.info('上拉数据加载完成.');
}, 1000);
},
loadData: funct搭建系统点我wcqh.cnion(tail, callback) {
var that = this;
wx.request({
url: app.gBaseUrl + 'compony-detail/page',
m搭建系统点我wcqh.cnethod: 'GET',
data: {
page: that.data.componys.length,
count: 20,
componyname:that.data.searchVa搭建系统点我wcqh.cnlue
},
success: (res) => {
// console.log(JSON.stringify(res.data))
that.setData({
componys: that.data.co搭建系统点我wcqh.cnmponys.concat(res.data),
});
if (callback) {
callback();
}
}
})
},
整个下拉刷新和上拉加载的功能我们就已经实现了，主要就是利用到了scrol搭建系统点我wcqh.cnl-view的组件特性，根据触发的时机来控制记载组件的显隐，整体实现并不是很难，具体代码可根据自己的实际情况做适当调整哦。
更多编程相关知识，请访问：编程视频！！
以上就是浅谈小程序中下拉刷新和上拉加载功搭建系统点我wcqh.cn能怎么实现？（附代码）的详细内容，更多请关注php中文网其它相关文章！
会员专属
暂无评论内容