彻底解决uniapp中使用scroll-view中的下拉刷新,无法取消刷新状态的坑。refresher-triggered的赋值问题
·
在uniapp中使用scroll-view组件的下拉刷新,在刷新过一次之后,使用scroll-view文档中的refresher-triggered无法正确的取消刷新加载的状态。
尤其是在swiper-view中嵌套scroll-view组件的时候,更加难以取消刷新状态,网上基本上没有一个好的方法 搜不到或者太繁琐
查看官网文档中的写法,我觉得官网写的并不明确,导致很多人使用的时候,都不清晰在什么时候把refresher-triggered置为true,什么时候置为false
接下来说解决办法
在使用scroll-view的下拉刷新的时候,只需使用到 关于刷新 的 两个参数 和 一个方法
<scroll-view
enable-back-to-top
class="scroll-view"
scroll-y
@scrolltolower="getInfoListFn"
@scroll="scrollFn"
refresher-enabled //直接设为true就行,后边不在改变它的值
:refresher-triggered="triggered" //默认也要设为true,或者页面加载完成之后给它设为true,总之要在你进行刷新动作之前给它设为true
@refresherrefresh="refreshFn" //监听是否触发刷新,只用到这一个方法就行,下边其他方法,可以用来做其他操作,比如自定义加载动画
@refresherrestore="restoreFn" //监听是否被复位,暂时用不到
@refresherpulling="pullingFn" //监听是否被下拉,暂时用不到
@refresherabort="rabortFn" //监听是否终止了刷新,暂时用不到
>
<view class="main"> </view>
</scroll-view>
const triggered = ref(true)
let isRefreshing = false //判断是否正在刷新,相当于加一个标志
const refreshFn = async () => {
if (isRefreshing) return
isRefreshing = true
if (!triggered.value) {
triggered.value = true
}
//接下来准备调用接口
current_page.value = 1
articleList.value = []
finish.value = false
loadStatus.value = 'loading'
skeletonsLoading.value = true
await getInfoListFn()
//接口调用完成之后
triggered.value = false
isRefreshing = false
}
const restoreFn = () => {
console.log('被复位')
}
const pullingFn = () => {
console.log('被下拉')
}
const rabortFn = () => {
console.log('被终止')
}
更多推荐

所有评论(0)