uni-app框架+vue 实现上拉加载和下拉刷新功能

在uni-app中使用Vue实现上拉加载和下拉刷新功能，可以利用<scroll-view>组件的scrolltoupper和scrolltolower事件。以下是一个简单的示例：

<template>
  <view>
    <!-- 下拉刷新 -->
    <view class="scroll-view-refresh" v-if="isRefresh">
      正在刷新...
    </view>
    <!-- 上拉加载 -->
    <scroll-view
      class="scroll-view"
      scroll-y="true"
      @scrolltoupper="refresh"
      @scrolltolower="loadMore"
      :style="{ height: scrollHeight + 'px' }"
    >
      <view v-for="(item, index) in list" :key="index">{{ item }}</view>
      <!-- 加载提示 -->
      <view class="scroll-view-loadmore" v-if="isLoading">
        正在加载更多...
      </view>
    </scroll-view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: [],
      isLoading: false,
      isRefresh: false,
      scrollHeight: 0, // 动态计算可用高度
    };
  },
  methods: {
    // 模拟数据加载
    fetchData() {
      // 实际应用中，这里应该是网络请求
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(['Item' + (this.list.length + 1)]);
        }, 1000);
      });
    },
    // 下拉刷新
    refresh() {
      this.isRefresh = true;
      setTimeout(() => {
        this.list = [];
        this.fetchData().then((data) => {
          this.list.push(...data);
          this.isRefresh = false;
        });
      }, 1000);
    },
    // 上拉加载更多
    loadMore() {
      this.isLoading = true;
      setTimeout(() => {
        this.fetchData().then((data) => {
          this.list.push(...data);
          this.isLoading = false;
        });
      }, 1000);
    },
  },
  // 页面加载完成后设置scroll-view的高度
  onReady() {
    const systemInfo = uni.getSystemInfoSync();
    this.scrollHeight = systemInfo.windowHeight;
  },
};
</script>
 
<style>
.scroll-view-refresh,
.scroll-view-loadmore {
  text-align: center;
  padding: 10px 0;
  color: #999;
}
</style>

在这个例子中，scroll-view组件被用来创建可滚动视图，其中的scrolltoupper事件用于下拉刷新，scrolltolower事件用于上拉加载。refresh和loadMore方法分别处理下拉刷新和上拉加载的逻辑。这里的数据加载是通过模拟异步网络请求完成的，实际应用中应替换为实际的网络请求。