微信小程序下拉刷新和上拉加载
效果图
微信小程序实现下拉刷新和上拉加载有2中方法
1 用系统自带的 个人感觉特别简单
2 使用scroll-view 实现,
scroll-view 里面有2个属性是滑动到顶部以及到底部如下
其实就是滑动到顶部和底部的时候请求网络,就行了,
第一种方法说明:
在json里面先声明这个界面要用到刷新
{
"enablePullDownRefresh": true,
"backgroundColor": "#e5e5e5",
"onReachBottomDistance": 50
}
这里我设置了一个背景颜色,不然的话白色看到效果
在xml中定义一个list
{{item}}
js里面
调用onPullDownRefresh()和onReachBottom() 里面添加网络请求即可,
注意加载是从底部add进去的,用push 方法即可,当然还有其他的方法自己可以百度下
下面给出模拟的,
Page({
data: {
dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
count: 0
},
onPullDownRefresh() {
var self = this;
setTimeout(() => {
// 模拟请求数据，并渲染
var arr = self.data.dataList, max = Math.max(...arr);
for (var i = max + 1; i <= max + 3; ++i) {
arr.unshift(i);
}
self.setData({ dataList: arr });
// 数据成功后，停止下拉刷新
wx.stopPullDownRefresh();
}, 1000);
},
onReachBottom() {
var arr = this.data.dataList, max = Math.max(...arr);
if (this.data.count < 3) {
for (var i = max + 1; i <= max + 5; ++i) {
arr.push(i);
}
this.setData({
dataList: arr,
count: ++this.data.count
});
} else {
wx.showToast({
title: '没有更多数据了！',
})
}
}
})
这样是实现了刷新和加载了....
demo index里面是系统的,refresh是用scroll-view实现的,如果想切换在json里面切换显示的界面就行,我没有添加点击跳转的按钮
给出demo地址吧
demo地址,如果帮助了您希望给一个star