如何使用 scroll-view 实现下拉刷新和上拉加载更多？

推荐答案

// www.javascriptcn.com code example
// 在页面的 JSON 配置文件中启用下拉刷新
{
  "enablePullDownRefresh": true
}

// 在页面的 WXML 文件中使用 scroll-view 组件
<scroll-view
  scroll-y
  style="height: 100vh;"
  bindscrolltolower="loadMore"
  refresher-enabled
  bindrefresherrefresh="onRefresh"
>
  <!-- 内容区域 -->
  <view wx:for="{{list}}" wx:key="index">
    {{item}}
  </view>
</scroll-view>

// 在页面的 JS 文件中实现下拉刷新和上拉加载更多
Page({
  data: {
    list: [], // 数据列表
    page: 1, // 当前页码
    loading: false, // 是否正在加载
  },

  onLoad() {
    this.loadData();
  },

  // 下拉刷新
  onRefresh() {
    this.setData({ page: 1 });
    this.loadData();
  },

  // 上拉加载更多
  loadMore() {
    if (this.data.loading) return;
    this.setData({ page: this.data.page + 1 });
    this.loadData();
  },

  // 加载数据
  loadData() {
    this.setData({ loading: true });
    // 模拟网络请求
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + (this.data.page - 1) * 10}`);
      const list = this.data.page === 1 ? newData : [...this.data.list, ...newData];
      this.setData({ list, loading: false });
      wx.stopPullDownRefresh(); // 停止下拉刷新动画
    }, 1000);
  },
});

本题详细解读

1. 下拉刷新的实现

• 配置下拉刷新：在页面的 JSON 配置文件中设置 "enablePullDownRefresh": true，启用下拉刷新功能。
• 绑定事件：在 scroll-view 组件中设置 refresher-enabled 属性为 true，并绑定 bindrefresherrefresh 事件处理函数 onRefresh。
• 刷新逻辑：在 onRefresh 方法中，重置页码为 1，并调用 loadData 方法重新加载数据。加载完成后，调用 wx.stopPullDownRefresh() 停止下拉刷新动画。

2. 上拉加载更多的实现

• 绑定事件：在 scroll-view 组件中绑定 bindscrolltolower 事件处理函数 loadMore，当用户滚动到底部时触发。
• 加载逻辑：在 loadMore 方法中，检查是否正在加载，避免重复加载。然后增加页码并调用 loadData 方法加载更多数据。

3. 数据加载

• 模拟网络请求：在 loadData 方法中，使用 setTimeout 模拟网络请求。根据当前页码生成新的数据，并更新到 list 中。
• 停止加载：加载完成后，设置 loading 为 false，并停止下拉刷新动画。

通过以上步骤，可以实现 scroll-view 的下拉刷新和上拉加载更多功能。