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事件，并根据传递的参数来控制加载动画和“没有更多数据了”的提示是否显示。代码如下：

  
    {{appear === 0 ? '小球出现' : '小球消失'}}{{appear}}
    
      
         appear=val">
      
    
  



	import cs from './cs.vue';
	let observer = null;
	export default {
		components: {
			cs
		},
		data() {
			return {
				appear: 1
			}
		},

	}

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

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

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

cs.vue组件代码：

	
		
			{{item}}锄禾日当午
		
		
		
			没有数据了
		
	



	let observer = null;
	import QiuyLoading from './QiuyLoading.vue'
	export default {
		components: {
			QiuyLoading
		},
		props: ["appear"],
		data() {
			return {
				a: 20
			}
		},
		mounted() {
			observer = uni.createIntersectionObserver(this);
			observer.relativeTo('.scroll-view').observe('.ball', (res) => {

				// 当a》50时，停止加载
				if (this.a > 50) return this.$emit("aaa", 2);
				// 如果当前状态已经在加载中，则不进行。
				if (this.appear !== 1) return;
				// 出现了
				if (res.intersectionRatio > 60) {
					// 先让加载动画显示出来
					this.$emit("aaa", 0);
					setTimeout(() => {
						this.a += 10;
						// 加载出了数据，关闭加载动画
						this.$emit("aaa", 1);
					}, 3000)
				}
			})
		},
		onUnload() {
			if (observer) {
				observer.disconnect()
			}
		}
	}



	.notice {
		margin-top: 150rpx;
		margin: 150rpx 0 400rpx 0;
	}

	.is {
		height: auto;
		overflow: hidden;
	}

	.item {
		line-height: 100rpx;
		font-size: 40rpx;
	}

index.vue组件代码：

	
		{{appear === 0 ? '小球出现' : '小球消失'}}{{appear}}
		
			
				 appear=val">
			
		

	


	import cs from './cs.vue';
	let observer = null;
	export default {
		components: {
			cs
		},
		data() {
			return {
				appear: 1
			}
		},
	}


	.scroll-view {
		height: 800rpx;
		background: #fff;
		border: 1px solid #ccc;
		box-sizing: border-box;
		/* padding-bottom: 30px; */
	}

	.scroll-area {
		height: 1300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: .5s;
	}

QiuyLoading.vue里的内容

	
		L
		o
		a
		d
		i
		n
		g
		.
		.
	






	.loader {
		text-align: center;
		height: 0;
		overflow: hidden;
	}

	.is {
		height: auto;
		padding-bottom: 20rpx;
	}

最后，看下效果吧！