公式ウェブサイトのドキュメントはこちらをクリックしてください
<scroll-view scroll-y @scrolltolower="handelScrolltolower"
:refresher-threshold="50"
:refresher-enabled="true"
:refresher-triggered="refresherTriggered"
@refresherrefresh="refresherrefresh"
@refresherrestore="refresherrestore"
@refresherabort="refresherabort"
class="list-view">
<view class="cu-load" :class="isFinish?'over':'loading'"></view>
</scroll-view>
data(){
return {
isFinish: false,
approvalList: [],
param: {
page: 1,
limit: 10,
myStarted: true
},
refresherTriggered: false,
_refresherTriggered: false
}
},
refresherrefresh(){
console.log("自定义下拉刷新被触发");
let _this = this;
if (_this._refresherTriggered) {
return;
}
_this._refresherTriggered = true;
//界面下拉触发,triggered可能不是true,要设为true
if (!_this.refresherTriggered) {
_this.refresherTriggered = true;
}
this.loadStoreData();
},
refresherrestore(){
console.log("自定义下拉刷新被复位");
let _this = this;
_this.refresherTriggered = false;
_this._refresherTriggered = false;
},
refresherabort(){
console.log("自定义下拉刷新被中止 ");
let _this = this;
_this.refresherTriggered = false;
_this._refresherTriggered = false;
},
loadStoreData() {
let _this = this;
setTimeout(() => {
_this.refresherTriggered = false;//触发onRestore,并关闭刷新图标
_this._refresherTriggered = false;
}, 1000)
//重新请求数据
this.param.myStarted = true;
this.isFinish = false;
this.param.page = 1;
this.param.limit = 10;
this.approvalList = [];
this.getApprovalList();
},
//获取列表
getApprovalList(){
if(!this.isFinish){
let param = {...this.param,...this.selectParam}
this.$request.get(this.$api.GET_AREAS_LIST,param)
.then((response) => {
console.log("获取列表",response.data);
this.approvalList = [...this.approvalList,...response.data.list]
if(this.approvalList.length === response.data.totalCount) this.isFinish = true
this.param.page++
})
.catch((err) => {
console.log(err);
})
}
},