原生微信小程序实现 “上拉刷新” 和 “下拉加载” 的原理
上滑加载更多
在使用上滑加载更多时,有一个小坑需要注意下,如果是自定义的scroll-view,滑到底是没法触发onReachBottom函数的
需要在scroll-view组件上定义lower-threshold="50"属性(距底部/右边多远(50)时,触发 scrolltolower 事件)
然后bindscrolltolower = “自定义函数名”,把需要执行的逻辑放在这里面执行,假装他是onReachBottom函数
实现上滑加载更多的本质是
1 . 使用生命周期函数中的onReachBottom函数
2 .
下拉加载的本质是,把原有数据(data中已经获取的数据,如data中的numList,在页面加载时向里面添加了40个数据)和新添加的数据(在onReachBottom函数中进行添加数据,用户上滑时,加载进新数据),重新合并到新的数组里再把这个数组和赋值给data中的数组
Page({
data: {
numList: []
},
// 初始化数据,
startNumList: [],
index: 40,
// 页面加载时先给startNumList赋值,塞40个数进去,再给data中的numList赋值
onLoad: function (options) {
for (let i = 0; i < this.index; i++) {
this.startNumList.push(i)
}
this.setData({
numList: this.startNumList
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
/**
* 下拉刷新的本质是,将已有的数据全部清除,重新给data中的数组赋值
*/
onPullDownRefresh: function () {
// 重置一系列初始化数据
this.index = 40;
this.setData({
numList: this.startNumList
})
// 这里用一个定时器模拟请求等待时间
setTimeout(() => {
wx.showToast({
title: '数组已重置',
duration: 700,
});
wx.stopPullDownRefresh({
complete: (res) => { },
})
}, 1000)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
wx.showLoading({
title: "增加20个数中...",
mask: true
});
// for每次刷新,向数组中新增20个数
for (let i = this.index; i < this.index + 20; i++) {
const newArr = [];
newArr.push(i);
this.setData({
// 解构赋值,旧的数组和新增加的20个数的数组,一起赋值给data中的数组
numList: [...this.data.numList, ...newArr]
})
}
// 再次使用setTimeout模拟请求等待时间
setTimeout(() => {
this.index += 20;
wx.hideLoading();
}, 1000)
}
})
下拉重新加载
下拉加载的小坑需要注意下
1 . 下拉重新加载是依赖onPullDownRefresh函数进行的
2 . 要启动onPullDownRefresh函数,要先在json文件中进行配置
“enablePullDownRefresh”: true,(设置开启下拉加载)
“backgroundTextStyle”: “dark”,(设置加载有黑色点闪烁)
下拉加载函数onPullDownRefresh同样不适用自定义scroll-view
需要在scroll-view组件上使用upper-threshold="50"属性
再使用bindscrolltoupper=“自定义函数名”,所有逻辑在自定义函数名中操作,假装他是onPullDownRefresh函数
下拉刷新的本质是,将已有的数据全部清除,重新给data中的数组赋值,一般向api请求时都会返回随机的数据
<view class="wrap">
<view wx:for="{{numList}}" wx:key="index">{{item}}</view>
</view>
.wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
view:nth-child(2n) {
padding: 20rpx;
color: red;
}
view:nth-child(2n+1) {
padding: 20rpx;
color: blue;
}
}
代码gitee地址:https://gitee.com/chenminghuisir/wechat-applet-component
代码保存在仓库,pullDowmUpEvent文件里