uni-app H5 scroll-view自定义下拉刷新，连续两次下拉刷新失效

uni-app H5 scroll-view自定义下拉刷新，连续两次下拉刷新失效

1 回复

更多关于uni-app H5 scroll-view自定义下拉刷新，连续两次下拉刷新失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app H5端，scroll-view组件自带的refresher-enabled下拉刷新功能确实存在一些已知问题，尤其是在连续快速触发时容易出现失效或状态异常的情况。这通常是由于组件内部的状态管理机制导致的。

主要原因分析：

  1. 下拉刷新动画状态未完全重置，导致下次触发时条件判断异常。
  2. 快速连续操作时，touch事件与scroll逻辑可能产生冲突。

推荐解决方案：

方案一：使用自定义下拉刷新（推荐） 放弃scroll-view自带的下拉刷新，改用view+touch事件手动实现：

// 模板部分
<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
  <view :style="{ transform: `translateY(${pullDownY}px)` }">
    <!-- 下拉提示区域 -->
    <view v-if="pullDownY > 0">
      {{ pullDownY > 50 ? '释放刷新' : '下拉刷新' }}
    </view>
    <!-- 内容区域 -->
    <scroll-view scroll-y>
      <!-- 你的内容 -->
    </scroll-view>
  </view>
</view>

// 脚本部分
data() {
  return {
    startY: 0,
    pullDownY: 0,
    isRefreshing: false
  }
},
methods: {
  touchStart(e) {
    this.startY = e.touches[0].pageY
  },
  touchMove(e) {
    if (this.isRefreshing) return
    
    const moveY = e.touches[0].pageY
    const deltaY = moveY - this.startY
    
    // 只有在下拉且scroll-view在顶部时才触发
    if (deltaY > 0 && this.scrollTop <= 0) {
      this.pullDownY = Math.min(deltaY * 0.6, 150) // 限制最大下拉距离
    }
  },
  touchEnd() {
    if (this.pullDownY > 50 && !this.isRefreshing) {
      this.isRefreshing = true
      this.doRefresh()
    } else {
      this.pullDownY = 0
    }
  },
  doRefresh() {
    // 执行刷新逻辑
    setTimeout(() => {
      this.pullDownY = 0
      this.isRefreshing = false
    }, 1000)
  }
}

方案二：使用页面级下拉刷新 如果适用，可以考虑使用页面的onPullDownRefresh生命周期，配合pages.json配置：

// pages.json
{
  "path": "pages/index/index",
  "style": {
    "enablePullDownRefresh": true
  }
}

方案三：scroll-view的workaround 如果坚持使用scroll-view自带下拉，可以尝试强制重置：

// 刷新完成后执行
this.$nextTick(() => {
  this.$refs.scrollView.endRefresh()
  // 短暂禁用再启用
  this.refresherEnabled = false
  setTimeout(() => {
    this.refresherEnabled = true
  }, 100)
})
回到顶部