列表下拉刷新

64 阅读1分钟

image.png

实现列表下拉刷新数据,请求完成后,停止刷新。只需要两个参数(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
    })
},