Écrivez le titre du répertoire ici
Préparations (fosse)
Site officiel - actualisation déroulante : https://opendocs.alipay.com/mini/api/wo21qk
Préparation de l'actualisation déroulante (pit)
● Vous devez configurer "allowsBounceVertical": "OUI" dans l'option de fenêtre de l'application. json, correspondant à la page Configurez l'option "pullRefresh":true dans le fichier de configuration .json pour activer l'événement d'actualisation de la page déroulante.
tous les 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);
}
});