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

2021-07-09 23:06:36

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

需求场景

页面是一个列表页顶部有一个搜索框,列表区域使用scroll-view组件自定义下拉刷新,通过refresher-triggered来控制加载状态的显示隐藏

文档说明
refresher-triggered用于设置当前下拉刷新状态:

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

@refresherpulling用来定义自定义下拉刷新控件被下拉时触发的事件
@refresherrefresh用来定义自定义下拉刷新被触发执行的事件

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

解决办法
refresher-triggered的初始值为false
要先变为true,执行完刷新操作之后再变为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>

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
微信情报 更多 >
    每天进步一点点~