uniapp 下拉显示加载中 两秒后结束

在uni-app开发中，如果想要实现下拉列表加载更多数据时显示“加载中”的效果，并在等待两秒后自动结束这个加载状态，可以参考以下步骤：

1. 首先，你需要有一个下拉刷新组件，如`u-refresh-loading`，这是uni-app提供的内置组件，用于处理下拉加载状态。

<template>
  <view class="refresh-container">
    <u-refresh-loading v-if="isLoading" :text="loadText"></u-refresh-loading>
    <!-- 下拉列表内容 -->
    <ul ref="listWrapper" @touchstart="handleTouchStart"></ul>
  </view>
</template>

<script setup>
import { onMounted } from 'vue';

const isLoading = ref(false);
const loadText = "正在加载...";

onMounted(() => {
  // 设置初始状态为非加载状态
  isLoading.value = false;
});

function handleTouchStart(e) {
  if (e.targetTouches.length > 1 || !window.scrollY) return;
  isLoading.value = true; // 开始加载状态
  setTimeout(() => {
    // 模拟异步加载数据，这里可以替换为你实际的网络请求
    setTimeout(() => {
      isLoading.value = false; // 加载完成，恢复默认状态
    }, 2000); // 两秒后结束加载
  }, 200); // 触发加载后稍等200ms再开始计时，防止用户体验不佳
}
</script>

在这个例子中，当用户向下滚动触发`handleTouchStart`函数时，会进入加载状态并显示“加载中”。两秒后，通过`setTimeout`模拟数据加载完成，然后关闭加载状态。