HarmonyOS鸿蒙最全小程序实现滚动加载（懒加载）_小程序滚动加载，面试题汇总

本文链接：https://blog.csdn.net/2401_84850721/article/details/138981039

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

3. 加载并渲染更多数据

首先，我们需要对页面滚动事件进行监听。

// 在 Page 中添加以下代码来监听页面滚动事件
Page({
  onReachBottom: function() {
    // 触发加载更多数据
  }
});

onReachBottom 是小程序的内置事件，当页面的内容滚动到底部时会触发这个事件。

接下来，我们需要判断何时到达加载更多数据的条件。

// 在 Page 中添加以下代码来判断是否需要加载更多数据
Page({
  data: {
    hasMoreData: true, // 是否还有更多数据
    loading: false, // 是否正在加载数据
  },
  onReachBottom: function() {
    if (!this.data.hasMoreData || this.data.loading) {
      // 如果没有更多数据或者正在加载数据，则不需要加载更多，直接返回
      return;
    }

    // 触发加载更多数据
    this.loadMoreData();
  },
  loadMoreData: function() {
    // 标记正在加载数据
    this.setData({
      loading: true
    });

    // TODO 加载并渲染更多数据

    // 标记加载数据完成
    this.setData({
      loading: false
    });
  }
});

我们在 Page 数据中定义了两个变量：hasMoreData 和 loading。hasMoreData 表示是否还有更多数据，初值为 true。loading 表示是否正在加载数据，初值为 false。

当滚动到底部触发 onReachBottom 事件时，我们首先判断是否还有更多数据需要加载，如果没有了就不需要继续加载；同时，如果正在加载数据，则也不需要再次加载，因为数据正在加载中。

如果需要加载更多数据，则调用 loadMoreData 函数，其中需要我们编写加载数据的代码。

我们来看如何实现加载数据的代码。

// 在 Page 中添加以下代码来加载并渲染更多数据
Page({
  data: {
    hasMoreData: true, // 是否还有更多数据
    loading: false, // 是否正在加载数据
    dataList: [], // 所有数据列表
  },
  onReachBottom: function() {
    if (!this.data.hasMoreData || this.data.loading) {
      // 如果没有更多数据或者正在加载数据，则不需要加载更多，直接返回
      return;
    }
    // 触发加载更多数据
    this.loadMoreData();
  },
  loadMoreData: function() {
    // 标记正在加载数据
    this.setData({
      loading: true
    });

    // 加载数据
    let newPostList = loadNextPostList();

    // 如果没有新的数据了，更改 hasMoreData 为 false
    if (newPostList.length == 0) {
      this.setData({
        hasMoreData: false
      });
    } else {
      // 如果有新的数据，则将新数据加入到原数据列表的末尾，同时也要更新 dataList
      let oldPostList = this.data.dataList || [];
      let dataList = oldPostList.concat(newPostList);
      this.setData({
        dataList: dataList
      });
    }

    // 标记加载数据完成
    this.setData({
      loading: false
    });
  }
});
// 注意在上述代码定义了一个 loadNextPostList 函数，这个函数负责加载新的数据。

以上代码中的 loadNextPostList 方法是一个模拟数据加载的函数，并不是实际场景中可用的代码。
我们在 loadMoreData 方法中，标记 “正在加载数据”，然后调用 loadNextPostList 加载数据。如果加载结束后返回的数据为空，则表示没有更多的数据了，我们将设置 hasMoreData 为 false，告诉滚动加载的方法不需要再继续调用加载新数据的方法。
如果有新数据，将其合并到原数据中，并将合并后的列表更新到 data 中，同时重新设置 “加载数据完成” 的 flag，告诉滚动加载方法可以继续开始新的加载。
至此，我们已经实现了滚动加载的功能。
在这里插入图片描述