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

原创

已于 2022-07-07 15:38:27 修改 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

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

本文介绍如何在uni-app项目中，利用vue3和typescript，自定义实现scroll-view组件的下拉刷新功能。参考uni-app官方文档及Sirius_96的CSDN博客，详细解析下拉刷新的配置与实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <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 onRefresh = function () {
  console.log(data.triggered,'triggered')
  if (data._freshing) return;
  data._freshing = true;
  setTimeout(() => {
    data.triggered = false;
    dat