uniapp上拉页面实现loading加载效果（配合uView）

前言

在开始之前，你务必在项目中安装并配置好 uView，安装 配置

这里就不再详细说怎么安装配置了，官方文档已经说得很清楚了，不懂在评论区留言 😊

重要代码

<view class="loading" v-if="isShow">
			<u-loading mode="circle" color="blue" size="29"></u-loading>
			<text>正在加载更多</text>
</view>

var timer = null,
		_self;
export default {
	onLoad() {
			_self = this;
			},
	onReachBottom() {
			//触底的时候请求数据，即为上拉加载更多
			//为了更加清楚的看到效果，添加了定时
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				 // 注意这里是我自己自定义的方法，返回的页面数据
				_self.nextPage();
			}, 1000);
		},
	methods: {
			// 这里看不懂，没关系，就是自己自定义的方法
			nextPage() {
				if (!this.isBottom) {
					this.queryParams.pageNum++;
					let newNewsList;
					this.$u.api.getNewsList(this.queryParams).then(res => {
						if (res.data.length > 0) {
							newNewsList = res.data
							this.newsList = [...this.newsList, ...newNewsList];
						} else {
							this.isShow = false
						}
					})
				}
			}
		}
}

.loading {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			margin-bottom: 20rpx;

			text {
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}

总结

1. 引入uView 的 loading 组件，前提是已经安装和配置好 uView
2. 为了更加清楚的看到效果，在 onReachBottom() 生命周期钩子里添加了定时器