uniapp下拉刷新 scrollview

在 UniApp 中，可以使用 `scroll-view` 组件实现下拉刷新的功能。下面是一个简单的示例代码：

<template>
  <view>
    <!-- 下拉刷新头部 -->
    <view class="refresh-header" :style="{ marginTop: `${refreshTop}px` }">
      <text v-if="refreshStatus === 'normal'">下拉刷新</text>
      <text v-else-if="refreshStatus === 'pulling'">释放刷新</text>
      <text v-else-if="refreshStatus === 'refreshing'">正在刷新...</text>
    </view>

    <!-- scroll-view 包裹的内容 -->
    <scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" @scroll="scroll" @touchstart="touchStart" @touchend="touchEnd">
      <!-- 内容列表 -->
      <view class="content-list">
        <!-- 列表项 -->
        <view v-for="(item, index) in list" :key="index">{{ item }}</view>
      </view>

      <!-- 加载更多 -->
      <view v-if="showLoadMore" class="load-more">
        <text>加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      refreshTop: -60, // 下拉刷新头部的高度
      refreshStatus: 'normal', // 下拉刷新状态
      list: [], // 列表数据
      showLoadMore: false, // 是否显示加载更多
    };
  },
  methods: {
    scroll(e) {
      // 获取 scroll-view 的滚动位置
      const scrollTop = e.detail.scrollTop;

      // 根据滚动位置判断是否触发下拉刷新
      if (scrollTop < this.refreshTop && this.refreshStatus !== 'refreshing') {
        this.refreshStatus = 'pulling';
      } else if (scrollTop >= this.refreshTop && this.refreshStatus !== 'refreshing') {
        this.refreshStatus = 'normal';
      }
    },
    touchStart() {
      // 记录 touchstart 时的滚动位置
      this.startScrollTop = this.scrollTop;
    },
    touchEnd() {
      // 判断是否触发下拉刷新
      if (this.startScrollTop < this.refreshTop && this.refreshStatus === 'pulling') {
        this.refreshStatus = 'refreshing';
        // 执行刷新操作，例如请求数据
        this.refresh();
      }
    },
    refresh() {
      // 模拟异步请求数据
      setTimeout(() => {
        this.list = [1, 2, 3, 4, 5];
        this.refreshStatus = 'normal';
      }, 2000);
    },
    loadMore() {
      // 模拟异步加载更多数据
      setTimeout(() => {
        const start = this.list.length + 1;
        const end = start + 5;
        for (let i = start; i <= end; i++) {
          this.list.push(i);
        }
        // 隐藏加载更多的提示
        this.showLoadMore = false;
      }, 2000);
    },
  },
};
</script>

<style>
.refresh-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.scroll-view {
  flex: 1;
}

.content-list {
  padding: 20px;
}

.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  background-color: #f4f4f4;
}
</style>

以上代码实现了一个简单的下拉刷新和加载更多的功能，当用户下拉超过下拉刷新头部指定的高度时，释放后会触发刷新操作。加载更多则是在滚动到底部时触发并加载更多数据。你可以根据实际需求进行修改和扩展。