MartinYip
MartinYip
  • 发布:2020-04-16 11:20
  • 更新:2024-01-11 00:30
  • 阅读:16210

解决scroll-view下拉刷新无法正常恢复的问题

分类:uni-app
关于scroll-view组件的下拉刷新,无论是uni-app还是微信小程序,官方都说得不是很明白,有一个非常关键的关键规则没说清楚,组件属性例子:

refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore" scrolltolower="loadMore"

1.通过程序将triggered设为true时,将触发onRefresh;
2.不管triggered为何值,在界面中下拉,也会触发onRefresh,但不会自动改变triggered值(不能双向绑定,这是问题的根本原因);
3.onRefresh执行完毕,不会自动触发onRestore(这是问题的表现),使得刷新图标一直显示,必须是triggered由true变为false,才会触发onRestore并隐藏刷新图标;如果triggered一直为false,或一直为true,都不会触发。

解决办法:
1.在进入onRefresh后,如果triggered为false,则将它置为true,当执行完你的刷新操作(通常是获取新的数据)后,将triggered置为false
2.由于上一步中将triggered置为true,会再次触发onRefresh,故需再增加一个_freshing,表示是否正在执行刷新操作,在onRefresh中做判断,如_freshing为true,不执行刷新操作直接返回。

如果scroll-view有多个,要每个用自己的 triggered和refreshing来控制。

代码如下,和官方差不多,注意有关键的几个细节不同。

<script>  
    export default {  
        data() {  
            return {  
                triggered: false,  
                _freshing: false  
            }  
        },  
        onLoad() {  
            this._freshing = false;  
            setTimeout(() => {  
                this.triggered = true;//触发onRefresh来加载自己的数据,如果不用这种方式,不要在此改变triggered的值  
            }, 1000)  
        },  
        methods: {  
            onPulling(e) {  
                console.log("onpulling", e);  
            },  
            onRefresh() {  
                if (this._freshing) return;  
                this._freshing = true;  
                if (!this.triggered)//界面下拉触发,triggered可能不是true,要设为true  
                    this.triggered = true;  
                setTimeout(() => {  
                    this.triggered = false;//触发onRestore,并关闭刷新图标  
                    this._freshing = false;  
                }, 3000)  
            },  
            onRestore() {  
                console.log("onRestore");  
            },  
            onAbort() {  
                console.log("onAbort");  
            }  
        }  
    }  
</script>
19 关注 分享
m***@qq.com 1***@qq.com 4***@qq.com 是刘某人 1***@qq.com 1***@qq.com 1***@qq.com 2***@qq.com 1***@qq.com 以何为家 y***@126.com 1***@qq.com 1***@qq.com 1***@qq.com 2***@qq.com Meiwah w***@163.com xiaoxiaoka m***@163.com

要回复文章请先登录注册

雪猪snowpig

雪猪snowpig

回复 luch :
确实,我也遇到这样的问题,轻轻一滑就触发了下拉刷新,同问。求大佬指点
2020-06-24 11:25
1***@qq.com

1***@qq.com

回复 wxsm :
控制triggered = true 后触发 onRefresh 用的
2020-06-16 16:45
wxsm

wxsm

如此说来,`_freshing` 这个变量到底有什么用,不是很懂。有没有都一样的吧。
2020-06-11 14:48
luch

luch

```` js
<template>
<view>
<scroll-view
scroll-y
refresher-enabled
refresher-default-style="black"
refresher-background="#fff"
:refresher-triggered="regresherTriggered"
@scrolltolower="scrollBottomHandle"
@refresherrefresh="refresherrefreshHandle"
@refresherabort="refresherabortHandle"
@refresherrestore="refresherrestoreHandle"
@refresherpulling="refresherpullingHandle"
class="scroll-view-st"
>
<navigator url="./"><view v-for="item in dataList" :key="item.id" class="item-st">{{item.id}}</view></navigator>
</scroll-view>
<navigator open-type="navigateBack" :delta="1" class="sfs">back</navigator>
</view>
</template>

<script>
let a = 0
export default {
data() {
return {
regresherTriggered: false,
dataList: [],
loading: false,
freshing: false
}
},
onLoad() {
console.log('sss onload')
this.getList()
},
methods: {
// 滚定到底部触发
scrollBottomHandle() {
console.log('滚定到底部触发')
this.getList()
},
// 下拉刷新触发
refresherrefreshHandle() {
if (this.freshing) return
this.freshing = true
console.log('下拉刷新触发')
this.regresherTriggered = true
this.dataList = []
this.loading = false
a = 0
this.getList()
},
// 自定义下拉刷新被中止
refresherabortHandle() {
console.log('自定义下拉刷新被中止')
},
// 自定义下拉刷新被复位
refresherrestoreHandle() {
console.log(' 自定义下拉刷新被复位')
// this.regresherTriggered = 'restore'
},
// 自定义下拉刷新控件被下拉
refresherpullingHandle() {
console.log('自定义下拉刷新控件被下拉')
},
getList() {
console.log('调用了加载数据')
if (this.loading) return
this.loading = true
// this.regresherTriggered = true
setTimeout(() => {
console.log('请求道了数据')
let arr = []
a++
console.log('当前请求了第' + a + '页')
for (let i = 0; i < 15; i++) {
arr.push({ id: `${a}-${i}` })
}
this.regresherTriggered = false
this.dataList = [...this.dataList, ...arr]
this.loading = false
this.freshing = false
}, 500)
}
}
}
</script>

<style lang="scss">
.scroll-view-st {
height: 100vh;
}
.item-st {
height: 180rpx;
background-color: green;
margin-bottom: 10rpx;
}
.sfs {
position: fixed;
left: 10rpx;
top: 50%;
}
</style>

````
我这个demo 轻轻往上一划就触发了下拉刷新,希望大佬指点一下
2020-06-08 15:02
1***@qq.com

1***@qq.com

官网的例子是在onRestore里面把triggered设为true。不知道为什么要这样弄。感觉@refresherpulling和@refresherrestore没什么意义
2020-04-19 14:33