uni-app的scroll-view下拉刷新加载状态关闭不了的问题

薛定喵君

发布于 2021-07-13 11:22:00

3.4K0

发布于 2021-07-13 11:22:00

文章被收录于专栏：薛定喵君

最近使用uni-app开发h5时遇到下拉刷新状态无法关闭的问题，记录一下

页面需要用scroll-view组件自定义下拉刷新，通过refresher-triggered来控制加载状态的显示隐藏

refresher-triggered用于设置当前下拉刷新状态：

true 表示下拉刷新已经被触发
false 表示下拉刷新未被触发

然而发现在自定义下拉刷新执行事件中直接将refresher-triggered绑定的值改为false后并不会关闭加载状态。

解决办法 refresher-triggered的初始值为false 要先变为true，执行完刷新操作之后再变为false才会有效果

页面代码示例：

<template>
    <scroll-view class="content" scroll-y
        refresher-enabled="true" :refresher-triggered="triggered"
        :refresher-threshold="60" refresher-background="#f0f2f6"
        @refresherpulling="onPulling"
        @refresherrefresh="onRefresh">
    </scroll-view>
</view>
</template>

<script>
export default {
    data() {
        return {
            triggered: false
        }
    },
    methods: {
        onPulling() {
            var that = this;
            if(!this.triggered){
                //下拉加载，先让其变true再变false才能关闭
                this.triggered = true; 
                //关闭加载状态 (转动的圈)，需要一点延时才能关闭
                setTimeout(() => {
                    that.triggered = false;
                },1000)
            }
        },
        onRefresh() {
            // 自定义下拉刷新被触发执行
        }
    }
}
</script>