打造流畅的微信小程序虚拟列表，轻松应对海量数据

前端

2023-10-06 15:35:55

虚拟列表：微信小程序海量数据加载优化

在微信小程序开发中，展示海量数据时，直接加载所有数据会严重影响用户体验。虚拟列表是一种解决这个问题的有效手段，它只加载当前视口中的数据，在滚动时动态加载新数据。

虚拟列表的工作原理

虚拟列表利用了 scroll-view 组件的滚动条功能，在滚动时触发 scroll 事件。开发者可以在 scroll 事件中动态加载和渲染新的数据，实现数据的分页展示。

优化虚拟列表性能的建议

1. 合理设置 lower-threshold

lower-threshold 属性控制用户滚动到底部时触发 scroll 事件的距离。合理的设置有助于减少不必要的事件触发，提高性能。

2. 使用 Intersection Observer API

此 API 可以监听元素是否出现在视口中。通过它，可以只在数据项进入视口时加载和渲染，避免不必要的渲染操作。

3. 节流 scroll 事件

节流函数可以限制 scroll 事件的触发频率，防止在短时间内多次触发，导致性能下降。

4. 使用 requestIdleCallback API

此 API 允许在浏览器空闲时加载数据，避免在页面滚动过程中加载数据，导致卡顿。

5. 压缩数据

加载数据前对其进行压缩，可以减少数据传输量，提高加载速度。

6. 使用 CDN 加速

CDN 将数据缓存到离用户最近的服务器上，降低数据传输延迟，提高加载速度。

7. 使用 skeleton screen

在数据加载完成前，显示占位符元素，避免页面出现白屏闪顿。

代码示例

Page({
  data: {
    list: [],
    page: 1,
    loading: false,
  },

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

  onScroll(e) {
    // 距离底部 50px 时触发加载
    if (e.detail.scrollTop + e.detail.scrollHeight - e.detail.height < 50 && !this.data.loading) {
      this.loadData();
    }
  },

  loadData() {
    this.setData({ loading: true });
    wx.request({
      url: 'your_api_url',
      data: { page: this.data.page },
      success: (res) => {
        this.setData({
          list: [...this.data.list, ...res.data.data],
          page: this.data.page + 1,
          loading: false,
        });
      },
    });
  },
});