最近使用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>
