Write directory title here
Preparations (pit)
Official website - pull-down refresh: https://opendocs.alipay.com/mini/api/wo21qk
Pull-down refresh preparation (pit)
● You need to configure "allowsBounceVertical": "YES" in the window option of app.json, corresponding to the page Configure the "pullRefresh":true option in the .json configuration file to enable the page pull-down refresh event.
all codes
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);
}
});