准备工作(坑)
官网-下拉刷新:https://opendocs.alipay.com/mini/api/wo21qk 下拉刷新的准备工作(坑) ● 需要在 app.json 的 window 选项中配置 “allowsBounceVertical”:“YES”,在页面对应的 .json 配置文件中配置 “pullRefresh”:true 选项,才可开启页面下拉刷新事件。
所有代码
html
<view>
<view class="myscroll-wrap">
<view class="item" a:for="{{list}}">{{index+1}} 第{{pageIndex}}页</view>
<view class="loading" a:if="{{loading}}">正在加载中...</view>
</view>
</view>
css
.myscroll-wrap .item{
height: 200rpx;
padding: 30rpx;
border-bottom: 1rpx solid ;
}
.loading{
display: flex;
width: 100%;
height: 100rpx;
background: #eee;
align-items: center;
justify-content: center;
}
js
Page({
data: {
list:[],
pageIndex: 0,
pageNum: 10,
totalPage: 5,
loading: false,
isPullDownRefresh: false, // 是否在下拉刷新
},
onLoad() {
this.getdata();
},
onPullDownRefresh() {
// 页面被下拉
console.log('页面被下拉: ');
this.setData({isPullDownRefresh: true});
this.getdata(1);
},
onReachBottom() {
// 页面被拉到底部
console.log('页面被拉到底部: ');
if(this.data.pageIndex >= this.data.totalPage){
console.log('加载完毕');
this.setData({loading: false});
return
}
this.getdata();
},
async getdata(pageIndex){
if(this.data.isPullDownRefresh){
this.setData({
pageIndex: 1,
list: []
})
}
console.log('获取数据: ');
console.log('this.data.pageIndex: ', this.data.pageIndex);
this.setData({loading: true});
let list = this.data.list;
for(let i=1; i<11;i++){
list.push(i);
}
setTimeout(() => {
this.setData({
list,
pageIndex: (this.data.pageIndex)+1,
loading: false,
isPullDownRefresh: false
})
my.stopPullDownRefresh()
}, 3000);
}
});
|