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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐