微信小程序实现下拉刷新和上拉分页效果的方法详解

网友投稿 286 2023-11-12

−目录下拉刷新上拉分页

下拉刷新

下拉刷新这个玩意吧，很有用，但是在我博客关联的小程序中，用处不大，也是，我那个小程序一共也没有几个页……

微信小程序实现下拉刷新和上拉分页效果的方法详解

我这里还是用在首页，上拉分页，下拉刷新重载分页。我就是这么做的。

下拉刷新和上拉分页还是有区别的。

下拉刷新需要在index.json中添加属性：

"enablePullDownRefresh": true

Index.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
Page({
data: {
// 文章数组
articleList:[],
//每页显示的行数：
pagesize: 20,
//页码（从1开始）
page:1,// 文章页码
//用于标识是否还有更多的状态
state: 1,
//用于数组的追加和暂存
allProject: [],
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var self = this;
self.getArticleList();
},
/**
* 获取文章列表
*/
getArticleList()
{
var self = this;
// 请求后台接口获取文章列表
wx.request({
// 请求连接
url: https://guanchao.site/index/xxxx/xxxxx,
// 请求所需要的的参数
data: {
page:self.data.page
},
success(result){
var resData = result.data;
var resLength = result.data.length;
//如果搜出来的结果<1 就说明后面已经没数据可加载了，所以将state设为0
if (resLength < 1)
{
self.setData({
state: 0
});
}
else
{
var state1 = 1;
//如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载
if (resLength < self.pagesize)
{
var state1 = 0;
}
//循环将结果集追加到数组后面
for (var i = 0; i < resLength; i++) {
self.data.allProject.push(resData[i]);
}
self.setData({
articleList: self.data.allProject,
state: state1
});
}
wx.hideLoading();
}
});
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 下拉刷新
var self = this;
wx.showLoading({
title: 加载中...,
});
// 页码重新设置回1
self.data.page = 1;
// 将显示列表数据清空
self.data.allProject = [];
self.getArticleList();
wx.stopPullDownRefresh();
},
});

可以看到，我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据，并且页面显示数据的数组清空， 页码设置成1，重新加载数据。

另外，下拉刷新的事件也可以通过调用APIwx.startPullDownRefresh触发，效果与用户手动下拉刷新一致。

上拉分页

一般APP 或者 手机端一般给我们提供的都是，上拉分页，但是vant小程序版的组件是为我们提供了类似于PC网页那样的页码分页。

但是吧，我就不太想用web网站那样做一串数字页码那样了，这是反人类的设计。使用上拉进行分页。

小程序为我们提供了上拉加载事件：onPullDownRefresh

对，就是这个玩意。

这个直接就能触发，不需要其他什么多余的设置，下边我分享一下，我上拉分页的代码。

Index.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
Page({
data: {
// 文章数组
articleList:[],
//每页显示的行数：
pagesize: 20,
//页码（从1开始）
page:1,// 文章页码
//用于标识是否还有更多的状态
state: 1,
//用于数组的追加和暂存
allProject: [],
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var self = this;
self.getArticleList();
},
/**
* 获取文章列表
*/
getArticleList()
{
var self = this;
// 请求后台接口获取文章列表
wx.request({
// 请求连接
url: https://guanchao.site/index/xxxx/xxxxx,
// 请求所需要的的参数
data: {
page:self.data.page
},
success(result){
var resData = result.data;
var resLength = result.data.length;
//如果搜出来的结果<1 就说明后面已经没数据可加载了，所以将state设为0
if (resLength < 1)
{
self.setData({
state: 0
});
}
else
{
var state1 = 1;
//如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载
if (resLength < self.pagesize)
{
var state1 = 0;
}
//循环将结果集追加到数组后面
for (var i = 0; i < resLength; i++) {
self.data.allProject.push(resData[i]);
}
self.setData({
articleList: self.data.allProject,
state: state1
});
}
wx.hideLoading();
}
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var self = this;
var state = self.data.state;
if (state > 0){
// wx.showLoading({
//     title: 加载中...,
// });
self.data.page = self.data.page + 1;
self.getArticleList()
// wx.hideLoading();
}
},  
});

以上大概就是上拉分页的代码，说是上拉分页，其实就是滚动条触底触发的方法。但是为了体验的更好，还是需要做一些限制的。

大概就是这么实现的。

到此这篇关于微信小程序实现下拉刷新和上拉分页效果的方法详解的文章就介绍到这了,更多相关小程序下拉刷

您可能感兴趣的文章:微信小程序实战之上拉(分页加载)效果(2)微信小程序分页加载的实例代码微信小程序云开发实现数据添加、查询和分页微信小程序模板之分页滑动栏微信小程序实现移动端滑动分页效果（ajax）微信小程序实现分页加载效果微信小程序实现瀑布流分页滚动加载微信小程序之搜索分页功能的实现代码微信小程序实现分页查询详解微信小程序实现本地分页加载

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

标签：程序 方法 微信小程序 小程序 数字
上一篇:微信小程序之五种页面跳转方法小结
下一篇:微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
相关文章

 发表评论

暂时没有评论，来抢沙发吧~