微信小程序开发中，下拉刷新列表页面怎么写？

在微信小程序中实现下拉刷新列表页面，可以通过 全局下拉刷新配置 或 自定义 scroll-view 组件 两种方式实现。以下是详细步骤和代码示例：

方案 ①：使用全局下拉刷新（推荐）

通过页面配置文件启用下拉刷新功能，适合大多数列表场景。

1. 配置页面启用下拉刷新

在对应页面的 .json 文件中添加配置：

{
  "enablePullDownRefresh": true,
  "backgroundColor": "#f8f8f8",    // 下拉背景色
  "backgroundTextStyle": "dark"     // 下拉动画样式（dark/light）
}

2. 监听下拉事件并刷新数据

在页面的 .js 文件中实现 onPullDownRefresh 生命周期函数：

Page({
  data: {
    list: [],      // 列表数据
    pageNum: 1,    // 当前页码
    isLoading: false
  },

  // 监听下拉刷新动作
  onPullDownRefresh() {
    this.refreshList();
  },

  // 刷新列表方法
  refreshList() {
    if (this.data.isLoading) return;
    this.setData({ isLoading: true });

    wx.request({
      url: 'https://api.example.com/list',
      data: { page: 1 }, // 重置为第一页
      success: (res) => {
        this.setData({
          list: res.data.list, // 覆盖旧数据
          pageNum: 1,
          isLoading: false
        });
        wx.stopPullDownRefresh(); // 停止下拉刷新动画
      },
      fail: (err) => {
        console.error('刷新失败:', err);
        this.setData({ isLoading: false });
        wx.stopPullDownRefresh();
        wx.showToast({ title: '刷新失败', icon: 'none' });
      }
    });
  }
});

3. 结合上拉加载更多

若需同时支持上拉加载更多，可在 onReachBottom 中处理：

onReachBottom() {
  if (this.data.isLoading || !this.data.hasMore) return;
  this.loadMoreData(); // 加载下一页数据（需自行实现）
}

方案 ②：使用 scroll-view 自定义下拉刷新

通过组件实现更灵活的下拉效果，适合需要定制动画的场景。

1. WXML 模板

<scroll-view
  scroll-y
  style="height: 100vh;"
  bindscrolltoupper="handleRefresh"   <!-- 滚动到顶部时触发 -->
  refresher-enabled="{{true}}"       <!-- 启用自定义下拉刷新 -->
  refresher-triggered="{{isRefreshing}}"
  bindrefresherrefresh="handleRefresh"
>
  <!-- 下拉刷新动画 -->
  <view class="refresh-box" wx:if="{{isRefreshing}}">
    <image src="/images/loading.gif" class="loading-icon" />
    <text>加载中...</text>
  </view>

  <!-- 列表内容 -->
  <view wx:for="{{list}}" wx:key="id">{{item.title}}</view>
</scroll-view>

2. JS 逻辑

Page({
  data: {
    isRefreshing: false, // 控制下拉刷新状态
    list: []
  },

  handleRefresh() {
    if (this.data.isRefreshing) return;
    this.setData({ isRefreshing: true });

    wx.request({
      url: 'https://api.example.com/list',
      data: { page: 1 },
      success: (res) => {
        this.setData({
          list: res.data.list,
          isRefreshing: false
        });
      },
      fail: (err) => {
        this.setData({ isRefreshing: false });
        wx.showToast({ title: '刷新失败', icon: 'none' });
      }
    });
  }
});

3. CSS 样式

.refresh-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  color: #666;
}

.loading-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

注意事项

1. 防抖处理：防止快速连续下拉触发多次请求。

2. 加载状态反馈：通过 isLoading 或 isRefreshing 显示加载动画。

3. 网络错误处理：失败时提供重试机制。

4. 内容高度不足：若列表内容高度不足，可能导致下拉刷新不触发，可设置 min-height。