uni-app使用scroll-view自定义下拉刷新(vue3+ts)

VIP文章范闲~

已于 2022-07-07 15:38:27 修改

阅读量2k

点赞数

分类专栏： uniapp 文章标签：大数据

于 2022-07-04 08:58:36 首次发布

本文链接：https://blog.csdn.net/m0_60708088/article/details/125593103

版权

    <scroll-view
      show-scrollbar="true"
      style="height: auto"
      scroll-y="true"
      :refresher-enabled="data.isOpenRefresh"
      :refresher-triggered="data.triggered"
      refresher-default-style="white"
      :refresher-threshold="500"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
     //在这里自己写任意的内容
   </scroll-view>

const data = reactive({
  triggered: true,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
  isOpenRefresh: true, //是否开启下拉
  _freshing: false,
});

// 自定义下拉刷新控件被下拉
const onPulling = function (e: any) {
  console.log("onpulling", e);
  if (e.detail.deltaY < 0) return; // 防止上滑页面也触发下拉
  data.triggered = true;
};
// 自定义下拉刷新被触发
const