在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('被终止')
}
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐