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

最新推荐文章于 2024-03-08 12:05:40 发布

unIqueGsl

最新推荐文章于 2024-03-08 12:05:40 发布

阅读量5k

点赞数 4

文章标签：小程序 javascript vue

本文链接：https://blog.csdn.net/NGLLLLLL/article/details/121676070

版权

解决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>