小程序加载分页

这个示例将展示如何在微信小程序中实现基本的分页功能。假设您有一个API可以返回分页的数据，并且每页显示10条数据。

1. 页面结构 (WXML)

<view class="container">
  <view class="list">
    <block wx:for="{{items}}" wx:key="id">
      <view class="item">{{item.name}}</view>
    </block>
  </view>
  <button bindtap="loadMore" hidden="{{!hasMore}}">加载更多</button>
</view>

2. 样式 (WXSS)

.container {
  padding: 20px;
}
.list {
  margin-bottom: 20px;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

3. 逻辑 (JS)

Page({
  data: {
    items: [],
    page: 1,
    pageSize: 10,
    hasMore: true
  },
  onLoad: function() {
    this.loadItems();
  },
  loadItems: function() {
    const { page, pageSize } = this.data;
    // 假设您的API是这样的
    wx.request({
      url: 'https://your-api-url.com/items',
      data: {
        page: page,
        pageSize: pageSize
      },
      success: (res) => {
        const newItems = res.data.items || [];
        this.setData({
          items: [...this.data.items, ...newItems],
          page: page + 1,
          hasMore: newItems.length === pageSize
        });
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  },
  loadMore: function() {
    if (this.data.hasMore) {
      this.loadItems();
    }
  }
});

4. 上拉触底事件 (WXML)

如果您希望用户在上拉触底时自动加载更多数据，可以在页面结构中添加onReachBottom事件：

<view class="container" onReachBottom="loadMore">
  <view class="list">
    <block wx:for="{{items}}" wx:key="id">
      <view class="item">{{item.name}}</view>
    </block>
  </view>
</view>

5. 逻辑 (JS) 中处理上拉触底事件

在loadMore方法中，我们已经实现了加载更多数据的功能，因此不需要额外修改。

6. 配置文件 (JSON)

确保在页面的配置文件中启用下拉刷新和上拉触底事件（如果需要）：

{
  "enablePullDownRefresh": false,
  "onReachBottomDistance": 50
}

总结

以上代码示例展示了如何在微信小程序中实现基本的分页功能。您可以根据实际需求进行调整和扩展。如果您有任何具体问题或需要进一步的帮助，请告诉我！另外，如果您是在使用堆友平台上的AIGC工具生成内容并希望在小程序中展示这些内容，请提供更多详细信息，以便我能更好地为您提供帮助。