从头到尾剖析智能小程序上滑加载更多方法

2024-01-09 23:32:45

上滑加载更多

在智能小程序开发过程中，经常会遇到页面列表数量较多的情况，此时可以通过【分页】加载数据，并监听页面滑动到底部时触发【上滑加载更多】，从而增加页面首屏渲染速度。想要实现这种分页展示数据，可以使用以下步骤：

在WXML页面中，使用组件来滚动容器，并设置scrollTop="{{scrollTop}}"属性，使滚动容器的滚动位置与scrollTop的值同步。
在JavaScript文件中，使用Page()对象提供的onPageScroll()方法来监听页面滚动事件。
在onPageScroll()方法中，判断是否已经滚动到底部，如果已滚动到底部，则触发上滑加载更多事件。
在上滑加载更多事件中，使用wx.request()方法向服务器发送请求，获取更多数据。
在服务器端，处理请求并返回更多数据。
在小程序端，接收服务器返回的数据并更新页面数据。
将scrollTop的值重置为0，使滚动容器滚动到顶部。

具体代码示例：

// 在WXML页面中
<scroll-view scroll-y="true" bindscroll="onPageScroll" style="height: 100%;">
  <!-- 页面内容 -->
</scroll-view>

// 在JavaScript文件中
Page({
  data: {
    scrollTop: 0, // 滚动容器的滚动位置
    loading: false, // 是否正在加载数据
    hasMoreData: true, // 是否还有更多数据
    dataList: [] // 数据列表
  },

  onPageScroll(e) {
    if (this.data.loading) return;

    if (e.scrollTop + e.scrollHeight >= this.data.scrollTop + this.data.height) {
      this.setData({
        loading: true
      });

      this.loadMoreData();
    }
  },

  loadMoreData() {
    wx.request({
      url: 'https://example.com/api/getMoreData',
      data: {
        page: this.data.dataList.length / 10 + 1
      },
      success: (res) => {
        if (res.data.data.length > 0) {
          this.setData({
            dataList: this.data.dataList.concat(res.data.data),
            loading: false
          });
        } else {
          this.setData({
            hasMoreData: false,
            loading: false
          });
        }
      }
    });
  }
});