微信小程序上拉加载：实现无缝滚动加载更多内容

发布时间：2023-05-19

一、示例代码解析

首先，我们来看一下如何实现一个简单的上拉加载示例，代码如下：

//wxml代码
<scroll-view style="height: 100vh;" scroll-y="true" bindscrolltolower="loadMore">
  <view wx:for="{{list}}" wx:key="index">{{item}}
</scroll-view>
//js代码
Page({
  data: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    page: 1,
    pageSize: 3,
  },
  loadMore() {
    const { page, pageSize, list } = this.data;
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    const moreList = [ ...list, ...Array.from({ length: pageSize }, (v, k) => k + start + pageSize + 1) ];
    this.setData({
      list: moreList,
      page: page + 1,
    });
  },
});

上述代码实现了一个简单的上拉加载示例，通过 scroll-view 的 bindscrolltolower 事件在滚动到底部时，触发加载更多的操作。 其中，list 是展示在页面中的列表数据，page 表示当前页数，pageSize 表示每页数据数量。在 loadMore 函数中，我们先根据当前的 page 和 pageSize 计算出新数据的起始位置 start 和结束位置 end，并使用 Array.from 生成一个长度为 pageSize 的新数据，再使用 ES6 的展开语法将新旧数据合并并更新到原数据 list 中，最后 page+1 表示完成了一次加载操作。

二、滚动无限加载

上述示例中的加载更多操作，每次只能加载一页数据，如果我们希望在滚动到底部时能够自动加载下一页数据，我们该如何实现呢？ 实现这个功能比较简单，我们只需要在 loadMore 函数中不断地向 list 中添加数据即可，修改后的示例代码如下：

//wxml代码
<scroll-view style="height: 100vh;" scroll-y="true" bindscrolltolower="loadMore">
  <view wx:for="{{list}}" wx:key="index">{{item}}
  <view wx:if="{{loading}}" class="loading">loading...
</scroll-view>
//js代码
Page({
  data: {
    list: [1, 2, 3],
    page: 1,
    pageSize: 3,
    loading: false,
  },
  loadMore() {
    if (this.data.loading) return;
    const { page, list } = this.data;
    this.setData({ loading: true });
    wx.request({
      url: 'https://www.example.com/getData',
      data: {
        page: page + 1,
        pageSize: 3,
      },
      success: res => {
        const moreList = res.data;
        this.setData({
          list: [ ...list, ...moreList ],
          page: page + 1,
          loading: false,
        });
      },
    });
  },
});

在新的代码中，我们使用 wx.request 发送数据请求，在请求返回数据时将新数据插入到原有数据的末尾中，并且在请求完成之后，将 loading 状态设为 false，表示已经完成了一次请求。 此外，我们还需要在 wxml 中渲染一个 loading 的提示信息，告知用户正在加载数据，等数据加载完成后再将其隐藏。

三、滚动限流优化

在上述代码中，我们直接监听 scroll-view 的 scrolltolower 事件来实现滚动加载，这种方法会导致事件频繁触发，降低性能，因此我们可以使用限流的方式来优化滚动事件的触发次数，从而提升用户体验。 为了实现限流效果，我们可以使用 Lodash 库提供的 throttle 函数，将事件的触发间隔限制在一定的时间范围内。

//js代码
const _ = require('lodash');
Page({
  data: {
    list: [1, 2, 3],
    page: 1,
    pageSize: 3,
    loading: false,
  },
  loadMore: _.throttle(function() {
    if (this.data.loading) return;
    const { page, list } = this.data;
    this.setData({ loading: true });
    wx.request({
      url: 'https://www.example.com/getData',
      data: {
        page: page + 1,
        pageSize: 3,
      },
      success: res => {
        const moreList = res.data;
        this.setData({
          list: [ ...list, ...moreList ],
          page: page + 1,
          loading: false,
        });
      },
    });
  }, 2000),
});

上述代码中，我们使用 Lodash 库的 throttle 函数，将 loadMore 函数限制在每 2 秒钟才能触发一次，这样就能够有效地减少事件的触发次数，提升性能。

四、兼容 iPhone X 刘海屏

在 iPhone X 及以上机型中，由于刘海屏的存在，滑动的区域会相应地发生变化，因此在实现上拉加载时，需要针对 iPhone X 刘海屏进行特殊处理。 在实现上述功能时，我们可以使用 wx.getSystemInfoSync 获取系统信息，判断滑动区域的高度是否需要进行调整，并在 wxml 中引入一个占位元素，以便在刘海屏的情况下占据额外的滑动区域。

//wxml代码
<view class="导航栏">
<view class="占位元素{{isIpx?' ipx':''}}">
<scroll-view style="height: 100vh;" scroll-y="true" bindscrolltolower="loadMore">
  <view wx:for="{{list}}" wx:key="index">{{item}}
  <view wx:if="{{loading}}" class="loading">loading...
</scroll-view>
//js代码
const systemInfo = wx.getSystemInfoSync();
const isIpx = systemInfo.model.includes('iPhone X');
Page({
  data: {
    list: [1, 2, 3],
    page: 1,
    pageSize: 3,
    loading: false,
    isIpx,
  },
  loadMore: _.throttle(function() {
    if (this.data.loading) return;
    const { page, list } = this.data;
    this.setData({ loading: true });
    wx.request({
      url: 'https://www.example.com/getData',
      data: {
        page: page + 1,
        pageSize: 3,
      },
      success: res => {
        const moreList = res.data;
        this.setData({
          list: [ ...list, ...moreList ],
          page: page + 1,
          loading: false,
        });
      },
    });
  }, 2000),
});

在上述代码中，我们首先使用 wx.getSystemInfoSync 获取系统信息，在获取到系统信息之后，判断是否为 iPhone X 及以上机型，并将判断结果更新到 data 中的 isIpx 变量中。接着在 wxml 中引入一个占位元素，当 isIpx 为 true 时，元素的 class 属性中添加 ipx 样式，以此占据额外的滑动区域。

五、小结

本文中，我们从代码示例解析、滚动无限加载、滚动限流优化、兼容 iPhone X 刘海屏等多个方面详细地介绍了微信小程序上拉加载的实现方法。 通过本文的学习，希望读者们能够了解到微信小程序上拉加载的实现原理和优化措施，以此能够更好地为实际项目开发提供帮助。

推荐文章