解决uniapp scroll-view下拉刷新无法复位

最新推荐文章于 2025-03-12 21:05:07 发布

原创最新推荐文章于 2025-03-12 21:05:07 发布 · 6.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #vue

本文针对uniapp中scroll-view组件下拉刷新后无法复位的问题进行探讨，详细解析了属性refresher-triggered的使用，并提出通过动态设置该属性及监听@refresherrefresh事件来解决下拉刷新无法复位的解决方案。

解决uniapp scroll-view下拉刷新无法复位

属性

refresher-triggered ：设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

方法

@refresherrefresh：自定义下拉刷新被触发

问题：

当开启scroll-view下拉刷新功能时，发现下拉之后无法复位了
在这里插入图片描述

解决方法

动态设置refresher-triggered的值，当触发下拉刷新时，refresher-triggered = true；当下拉刷新执行完之后refresher-triggered = false。

示例

<template>
    <view>
        <scroll-view style="height: 300px; background-color:red" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"></scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                triggered: false
            }
        },
        methods: {
            onRefresh() {
                this.triggered= true;
                setTimeout(() => {
                    this.triggered = false;
                }, 1000)
            },
        }
    }
</script>