下拉刷新

js

 <scroll-view class="scroll-box" scroll-y refresher-enabled :refresher-triggered="triggered"
            @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
            refresher-default-style="none" :refresher-threshold="60">
            <view slot="refresher" class="custom-refresher">
                <text class="refresh-text">{{ refreshText }}</text>
            </view>
            
            
 </scroll-view>
 


 
 data(){
 return{
   triggered: false,
            refreshText: '下拉刷新',
            _freshing: false,
            
     }
 }
 metheds:{
 
//开始
  onPulling(e) {
            if (e.detail.dy < 60) {
                this.refreshText = '下拉刷新';
            } else {
                this.refreshText = '释放刷新';
            }
        },
        
        // 刷新中
        async onRefresh() {
            if (this._freshing) return;
            this._freshing = true;
            this.triggered = true;
            this.refreshText = '加载中...';
            await this.getList(true);
            this.triggered = false;
            this._freshing = false;
        },
        
        // 手松开
        onRestore() {
            this.refreshText = '刷新成功';
        },
        
        
         async getList(isRefresh = false) {
            if (!isRefresh) {
                uni.showLoading({ title: "加载中..." });
            }

            try {
                let { data, code, msg } = await getListTask()
                if (code == 200) {
                    this.fileList = data
                } else {
                    this.$u.toast(msg || '服务器异常')
                }
            } catch (err) {
                console.error(err)
            } finally {
                if (!isRefresh) {
                    uni.hideLoading()
                }
            }
        }
 }
 
 <style>
     .scroll-box {
        flex: 1;
        width: 100%;
        height: 0; // flex 布局下必须，否则 scroll-view 可能无法正常滚动
    }

    .custom-refresher {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

        .refresh-text {
            font-size: 26rpx;
            color: #999;
        }
    }
    
     </style>