uni-app scroll-view 下拉刷新 h5和小程序兼容写法（自用）

主要用于h5局部下拉闪动问题

参考博客：

uniapp几种实现下拉刷新的方式_uniapp下拉刷新-CSDN博客文章浏览阅读2.1w次，点赞4次，收藏56次。uniapp几种实现下拉刷新的方式_uniapp下拉刷新https://blog.csdn.net/C1091045324/article/details/128000726?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172126475416800227483486%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=172126475416800227483486&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-128000726-null-null.142%5Ev100%5Epc_search_result_base7&utm_term=uniapp%E5%AE%9E%E7%8E%B0%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%B0%8F%E7%BB%93&spm=1018.2226.3001.4187

uniapp中scroll-view的下拉刷新_uniapp scroll-view 下拉刷新-CSDN博客文章浏览阅读1.6w次，点赞11次，收藏68次。uniapp下拉刷新uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件。一.整个页面的刷新(onPullDownRefresh)在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。【官方文档】这里不再做过多介绍！今天的重点在下面????二.自定义页面刷_uniapp scroll-view 下拉刷新https://blog.csdn.net/qq_43531694/article/details/121439951?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172126475416800227483486%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=172126475416800227483486&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-121439951-null-null.142

//外面套一层盒子
 <view class="mt-8">
        <scroll-view
          class="list"
          scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="triggered"
          @refresherpulling="onPulling"
          @refresherrefresh="onRefresh"
          @refresherrestore="onRestore"
          @refresherabort="onAbort"
        >
          <view v-for="(item, index) in tableList" :key="index">
            <ShoppingCard :checked.sync="item.checked" :item="item" />
          </view>
          <NoData v-if="isOpenInterface && tableList.length <= 0" />
          <uni-load-more v-else :status="status" />
        </scroll-view>
  </view>

data() {
    return {
      triggered: false,
      isOpenInterface: false,//用于判断是否在接口请求后
    }
  },

在onLoad中初始化 是否在下拉状态

  onLoad(options) {
    // 获取系统信息
    this.getSystemInfo()
    this._freshing = false
  },

主要方法

 onPulling(e) {
      if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉

      // #ifdef MP-WEIXIN
        this.triggered = true
      // #endif
    },

 // 下拉刷新触发
 async onRefresh() {
      if (this._freshing) return
      this._freshing = true

      // #ifdef H5
      this.triggered = true
      // #endif

      this.isOpenInterface = false
      this.searchParams.current = 1
      await this.getList()
      this.triggered = false
      this._freshing = false
    },

 // 自定义下拉刷新被复位
 onRestore() {
      this.triggered = 'restore' // 需要重置
    },

 // 自定义下拉刷新被中止
 onAbort() {
      this.triggered = 'restore' // 需要重置
      this._freshing = false
    },