uniapp-030-内容区-上拉加载更多-低质量笔记

1 - 完成是否请求数据的功能

如果我点击了前端开发，会向服务器请求数据。

如果我点击了后端开发，会向服务器请求数据。

如果我再点击前端开发，还是会向服务器请求数据，实际上这一次，我不需要向服务器请求数据了。

所以，我们在请求数据的时候，要做一些判断的。

2 - loading动画

当我点击标签页的时候，正在向服务器请求数据，这个时候，我希望页面显示一个loading。

插件市场下载插件。

下载完成后就是在uni_modules当中。

然后直接在uni-load-more当中使用这个功能就可以了。

如果我写status是loading，那么每次刷新页面的时候，会有雪花的加载效果。

如果我如上图写的status是noMore，上拉到页面底部的时候，就会有下面的效果：

3 - 实现上拉加载更多 - 先分页请求数据

要做上拉加载，其实就是先要进行分页请求数据。

从服务器请求数据的时候，要进行分页请求。

然后对应修改我们云函数的代码。

4 - 实现上拉加载更多 - 云函数分页请求

注意，这里的聚合方法当中的skip是跳过多少数据，这里我们通过pageSize和page的小技巧，解决了第一页加载和非第一页加载的数据计算问题。

注意，这里的聚合方法当中的limit是返回多少数据。

5 - 实现上拉加载更多 - 事件传递

注意看我上面的图。

list-scroll是使用了scroll-view组件的，这个组件里头是有默认事件的。

当拉到底部的时候，会触发事件的。

然后我们把事件从list-scroll传到list-item。

然后从list-item传到list(swiper)。

然后我们在list(swiper)当中监听到了上拉加载更多的事件后，修改我们的page，然后发起网络调用。

6 - 实现上拉加载更多 - 数据问题处理

第一，我们是在list.vue组件当中的。

第二，每次我们点击选项卡的时候，我们是希望从第1页加载的。

第三，所以我们的page不能是一个公共变量，是需要是一个和item关联的变量。

所以，我们应该用这种方式来定义page。

第四，当我们触发上拉加载更多的时候。

我们需要知道这是哪一个item，然后去修改它对应的page。

如上图的this.load[this.activeIndex].page++。

第五，在我们发送网络请求的时候，我们要进行判断。