vant weapp 实现下拉刷新上拉加载 完整示例

下面是一个使用 Vant Weapp 实现下拉刷新和上拉加载的完整示例：

1. 在小程序的页面文件中引入 Vant Weapp 的相关组件和样式：

<view>
  <!-- 引入下拉刷新组件 -->
  <van-refresh
    bind:refresh="onRefresh"
    bind:refreshing="isRefreshing"
    bind:refreshed="onRefreshed"
  >
    <!-- 下拉刷新内容 -->
    <van-loading
      slot="top"
      size="20px"
      type="circular"
      color="#1989fa"
    />
  </van-refresh>

  <!-- 列表内容 -->
  <scroll-view
    scroll-y="{{true}}"
    bind:scrolltolower="onScrollToLower"
  >
    <!-- 列表项 -->
    <view wx:for="{{list}}" wx:key="index">
      <!-- 列表项内容 -->
    </view>

    <!-- 上拉加载提示 -->
    <van-loading
      wx:if="{{isLoading}}"
      size="20px"
      type="circular"
      color="#1989fa"
      custom-class="loading"
    ></van-loading>
  </scroll-view>
</view>

2. 在页面的 JavaScript 文件中定义相关函数和数据：

Page({
  data: {
    list: [], // 列表数据
    isLoading: false, // 是否正在加载
    isRefreshing: false // 是否正在刷新
  },

  onLoad() {
    this.loadData(); // 页面加载时加载数据
  },

  // 下拉刷新事件
  onRefresh() {
    if (this.data.isRefreshing) return;
    
    this.setData({
      isRefreshing: true
    });

    // 模拟请求数据
    setTimeout(() => {
      this.loadData();
      this.setData({
        isRefreshing: false
      });
    }, 1000);
  },

  // 上拉加载事件
  onScrollToLower() {
    if (this.data.isLoading) return;

    this.setData({
      isLoading: true
    });

    // 模拟请求数据
    setTimeout(() => {
      this.loadData();
      this.setData({
        isLoading: false
      });
    }, 1000);
  },

  // 加载数据
  loadData() {
    // 模拟请求数据
    const newData = []; // 新的数据

    this.setData({
      list: this.data.list.concat(newData)
    });
  }
})

在上面的示例中，`van-refresh` 组件用来实现下拉刷新功能，`van-loading` 组件用来显示加载状态。通过绑定相关事件和数据，当用户进行下拉刷新或上拉加载操作时，会触发相应的函数进行数据的请求和处理。

注意：以上代码只是一个示例，具体的实现方式可能会根据你的项目需求和页面结构有所不同。你可以根据 Vant Weapp 的文档和示例进行更详细的配置和定制。