小程序刷新.gif
这是七月老师留的作业（功能比较简陋，有问题欢迎指出），在做这个事情之前，我创建了封装网络请求shopList模型类和UI显示的load组件。
shopList 模型类
image.png
class ShopList {
//false：网络闲置，true：被占用
static isRequest = false;
//页数
static page = 1;
//下拉刷新
refreshTopPull(reSuccess, reFail) {
ShopList.page = 1
wx.showNavigationBarLoading({
success: (res) => {
debugger
},
})
setTimeout(() => {
wx.hideNavigationBarLoading({
success: (res) => {
reSuccess()
},
fail: (res) => {
reFail()
}
})
}, 2000);
}
//上拉加载 list:数据，reLoading返回加载状态，reSuccess：成功，reFail：失败
refreshBottomPull(list,reLoading,reSuccess, reFail) {
//上拉加载
//reLoading: -1初始状态 0正在加载，1加载完毕，2暂无数据
if(ShopList.page >= 3){
//没有更多数据（做个假的没有更多数据）
reLoading(2)
return
}
//判断请求是否占用
if(ShopList.isRequest){
return
}
reLoading(0)
//正在加载
ShopList.isRequest = true
setTimeout(() => {
//已经加载完毕
reLoading(1)
setTimeout(() => {
ShopList.isRequest = false
ShopList.page +=1
reLoading(-1)
var dataList = list.concat(list)
reSuccess(dataList)
}, 1000);
}, 2000);
}
}
export {
ShopList
}
加载自定义组件
image.png
wxml代码
<view class="contain">
<text class="title" wx:if="{{isState==0}}">正在加载</text>
<text class="title" wx:if="{{isState==1}}">加载完毕</text>
<text class="title" wx:if="{{isState==2}}">没有更多数据</text>
</view>
最后是核心实现代码
JS
onLoad: function () {
shopOB = new ShopList()
wx.lin.renderWaterFlow(this.data.demo, false, () => {
console.log('渲染成功')
})
},
onPullDownRefresh: function () {
// 触发下拉刷新时执行
//下拉刷新
shopOB.refreshTopPull(
reSuccess => {
//下拉刷新成功
wx.lin.renderWaterFlow(this.data.demo, true, () => {
console.log('渲染成功')
})
},
reFail => {
//下拉失败
},
)
},
onReachBottom: function () {
// 页面触底时执行，上拉加载
shopOB.refreshBottomPull(this.data.demo,
reLoading =>{
//加载状态
this.setData({
isState:reLoading
})
},
reSuccess => {
//加载成功
wx.lin.renderWaterFlow(reSuccess, false, () => {
// console.log('渲染成功')
})
},
reFail => {
//加载失败
},
)
},
WXML
<water-flow id="myComponent" generic:l-water-flow-item="l-demo" column-gap="20rpx"/>
<loading-demo isState="{{isState}}"></loading-demo>
JSON
{
"component": true,
"enablePullDownRefresh":true,
"usingComponents": {
"l-demo":"../l-demo/l-demo",
"water-flow":"../../miniprogram_npm/lin-ui/water-flow",
"loading-demo":"../template/load"
}
}
1.下拉刷新
我的思路
下拉刷新触发系统方法onPullDownRefresh =》模型中refreshTopPull =》数据请求成功和刷新UI、停止刷新动画
2.上拉
我的思路
上拉加载触发系统方法onReachBottom =》模型中refreshBottomPull =》数据正在加载 =》数据请求成功或者暂无数据 =》刷新UI
下面有几个注意点
底部加载显示封装了load组件，方便其他地方使用。
ShopList模型中的reLoading有几种状态: 0正在加载，1加载完毕，2暂无数据，通过isState字段来改变页面的状态。
模型ShopList 中的isRequest：false和true，来判断请求是否占用，如果占用的话return返回，不执行下面的代码。
模型ShopList 中refreshBottomPull方法中的 ShopList.page >= 3，是为了大于3页，做一个假的没有更多数据显示。
