uni-app小程序中做页面滚动底部或顶部加载效果

在移动应用开发中，无限滚动加载是一个常见的功能，用户可以通过滑动屏幕来加载更多的内容，从而提高应用的用户体验。本文将介绍如何使用Uniapp实现无限滚动加载的功能。

概述

我们需要实现的无限滚动加载功能的具体效果如下：

1. 当用户滑动到底部时，自动加载更多的数据。

2. 在加载数据时，显示一个加载动画，防止用户误以为应用已经崩溃。

3. 当所有数据都已经加载完毕时，提示用户“没有更多数据了”。

方案

我们可以通过以下步骤来实现无限滚动加载功能：

1. 在cs.vue组件中，使用uni.createIntersectionObserver()方法创建一个交叉观察器，用于观察加载动画是否进入了用户的视图区域。

2. 在交叉观察器的回调函数中，判断加载动画是否进入了用户的视图区域，并根据需要加载更多的数据。

3. 在加载数据时，使用事件来控制加载动画的出现与隐藏。

4. 当所有数据都已经加载完毕时，使用事件来控制“没有更多数据了”的提示是否显示。

5. 在index.vue组件中，引入cs.vue组件，并通过事件来控制加载动画和“没有更多数据了”的提示是否显示。

实现

在cs.vue组件中，我们需要使用事件来控制加载动画的出现与隐藏。具体来说，当交叉观察器的回调函数中判断需要加载数据时，我们需要通过$emit方法触发一个名为aaa的事件，并传递参数0，表示加载动画需要出现。当数据加载完毕后，我们再次触发aaa事件，并传递参数1，表示加载动画需要消失。代码如下：

if (res.intersectionRatio > 0) {  this.$emit("aaa", 0); // 加载动画出现  setTimeout(() => {    this.a += 10;    this.$emit("aaa", 1); // 加载动画消失  }, 3000)}

在cs.vue组件中，我们还需要使用事件来控制“没有更多数据了”的提示是否显示。具体来说，当所有数据都已经加载完毕时，我们需要通过$emit方法触发一个名为aaa的事件，并传递参数2，表示“没有更多数据了”的提示需要显示。代码如下：

if (this.a > 50) return this.$emit("aaa", 2);

在index.vue组件中，我们需要引入cs.vue组件，并通过事件来控制加载动画和“没有更多数据了”的提示是否显示。具体来说，我们需要监听aaa事件，并根据传递的参数来控制加载动画和“没有更多数据了”的提示是否显示。代码如下：

最后，为了避免内存泄漏，我们需要在cs.vue组件销毁时将交叉观察器断开连接。具体来说，我们需要在onUnload生命周期函数中使用disconnect()方法将交叉观察器断开连接。代码如下：

onUnload() {  if (observer) {    observer.disconnect()  }}

至此，我们就完成了无限滚动加载的实现。完整代码如下：

cs.vue组件代码：

index.vue组件代码：

QiuyLoading.vue里的内容

最后，看下效果吧！

来源地址：https://blog.csdn.net/weixin_60678263/article/details/129859542