uniapp使用scroll-view下拉刷新与上滑加载
scroll-view适合局部下拉刷新场景
<!-- 滚动视图区域 -->
<scroll-view class="content" :scroll-y="true" refresher-enabled="true" @refresherrefresh="pulldown" lower-threshold="150"
@scrolltolower="finishPullUp" ref="scroll" :refresher-triggered="triggered">
</scroll-view>
param: { // 请求参数
page: 1,
new_status: ''
},
list: [], // 订单列表
total_page: 1, // 总页数
pulldown() { // 下拉刷新
if (!this.triggered) {
this.triggered = true;
this.param.page = 1
this.getList(true)
setTimeout(() => {
this.triggered = false;
}, 1000)
}
},
getList(isRefresh = false) { // 获取用户列表
exchangeResource.buyList(this.param).then((response) => {
if (response.errcode === ERR_OK) {
if (response.data) {
if (isRefresh) {
this.list = response.data
console.log(this.list)
} else {
this.list = [...this.list, ...response.data]
}
this.total_page = response.page.total_page
}
}
})
}