实现列表下拉刷新数据,请求完成后,停止刷新。只需要两个参数(triggered、isRefreshing),一个方法(refreshFn),接口调用完成后重置triggered、isRefreshing的状态。
<scroll-view v-if="list.length>0" scroll-y :style="{height: 'calc(100vh - 200rpx)'}"
refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshFn">
<view class="scroll-box">
</view>
</scroll-view>
triggered: true,
isRefreshing: false, //判断是否正在刷新
// 下拉刷新列表
refreshFn() {
if (this.isRefreshing) return
this.isRefreshing = true
if (!this.triggered) {
this.triggered = true
}
this.getList('init')
},
// 获取列表数据
getList(type) {
let loading = 'none'
if (type == 'init') {
this.page = 1
this.goTop()
loading = 'byo'
}
let data = {
page: this.page,
page_size: this.limit,
order_date: this.date
}
uni_get({
url: '/api/v1/distribution/distribution-order',
data,
loading
}).then(res => {
if (res.data.code == 200) {
if (type == 'append') {
this.list = this.list.concat(res.data.data.rows)
} else {
this.list = res.data.data.rows || []
}
this.loadMoreStatus = 'noMore';
this.totalPage = res.data.data.page_total
}
}).finally(() => {
// 接口调用完成之后
this.triggered = false
this.isRefreshing = false
})
},