我们是在getList里面请求的数据。我们要去做一个分页。
image.png
首先我们要知道是第几页，和每页显示多少数据。使用云函数，带着这俩参数去请求。
image.png

云函数内处理分页参数

首先是需要接收参数。page默认给个1 pageSize默认给个10的默认值。
image.png
根据这两个参数查询数据，在聚合里面给我们提供了两个方法。
skip就是跳过。
image.png
第一页就是从0开始。当前页是1减去1为0 那么0*10就是0.跳过0条数据。也就是从0开始。
image.png
每次返回多少条数据limit
image.png
image.png
部署
image.png
每次返回2条数据
image.png
报错
image.png
这里改成等号
image.png
再次上传部署
image.png
刷新页面，每次显示2条数据
image.png
改成5条数据
image.png
返回了5条数据
image.png

上拉加载

滚动我们是在list-scroll组件。
image.png
这里最终用的是scroll-view的组件。
image.png
组件会接收到一个事件。scrolltolower.
image.png
image.png
起个名字叫做loadmore
image.png
注册事件。
image.png
滚动到下面触发
image.png
获取到事件后，我们应该把事件传递到list-item里面。
image.png
再从list-item里面发送给list
image.png
listScroll往上传递
image.png
listItem接收listScroll传递过来的事件
image.png
listItem再往父组件传递。
image.png
再从list里面接收子组件传递的事件。
image.png
在list里面打印上拉测试的console输出。
image.png
滚动到底部触发
image.png
参数的定义放在data里面
image.png
每次上拉就page+1
image.png
把结果传给云函数。
image.png
调用后端事件
image.png
滚动到底部，数据有明显的加载。

image.png
记载新页面的时候，原有的数据被替换了。

接收到数据后，累计增加数据

先把老的数据放在变量里面，然后在变量里面push新的数据，这里用了es6的三个点，扩展运算符。
image.png
image.png
报错
image.png
数据类型错误，这里应该加上current
image.png
push是个undefined
image.png
我们第一次渲染的时候，这里是一个对象：{}
image.png
后面加一个或者是空数组，这样我们让oldList等于一个空数组，它是有push方法的。
image.png
这样页面就加载成功了
image.png
上拉到最后一条，加载新的数据
image.png
image.png

后面tab没数据的问题

向左滑动 切到下一个tab 的时候。并没有加载更多的数据。
image.png
后面其他的分类也都没有数据了
image.png
这里打印了this.tab
image.png
我们把page打印出来
image.png
全部的tab一直下拉没有数据后，然后切换到后端开发，发现输出的page是3.
image.png
请求到的数据是空的。我们应该是从第一页开始才对。
image.png
这是因为page和pageSize做了共有的变量，上面的listCatchData里面有每一个item的数据。每一个swiper里面的数据共享了page和pageSize
image.png
把page去掉，放到load里面，只共享pageSize
image.png
要对数据做初始化。如果this.load[current]不是一个对象，那么里面就给它初始化为1
image.png
这里漏了一个逗号
image.png
我们希望有一个变量控制loadMore。第一次加载就是加载中的状态。
image.png
image.png
image.png
image.png
可以正常的切换了。
image.png

处理，没有更多数据

数据长度为0就可以任务没有更多数据。

image.png
需要把loading传给。
image.png
增加一个属性。把当前项传给listItem.
image.png
loadItem内接收，定义个一个prop属性。
image.png
赋值
image.png
一直翻页到最后
image.png
这里改成这样
image.png
刷到最后一页，没有报错，但是一直是加载中
image.png
一直在加载中，说明我们之类的set是没有生效的
image.png
强制渲染页面
image.png
刷到最后一页
image.png
再继续往下翻页就报错了。skip的参数不能为负数。
image.png
加上这句就不至于报错。
image.png
image.png
继续上拉刷新还是返回这个
image.png

没有数据，不再请求

等于noMore直接return

image.png
不管怎么上拉 都不再请求后端的数据了。
image.png
滑动到第二个tab
image.png
进行上拉加载还是提示加载中
image.png
再去上拉加载，数据没有任何的变化。
image.png
大篇幅的用了this.acticeIndex
image.png
这是父组件传递过来的。
image.png
在切换tab的时候会赋值，实际上我们左右滑动的时候，this.acticeIndex是不会变的。因为我们这里并没有一个重新赋值的操作。
image.png
所以我们在这里change的时候，就去更新下activeIndex
image.png
我们包保证tabIndex和activeIndex是保持一致的。
image.png

数据少的问题

数据只有三条，上拉刷新一直在loading。构不成页面的滚动 ，构不成上拉的事件， 所以一直在loading
image.png
image.png
只需要数据少于pageSize的时候不去显示loadMode
image.png
改成每页显示10条数据。
image.png
pageSize设置的是10 比这里的9要大一。如果有10条数据是不会显示loadMode组件的。所以这里要比pageSize小1
image.png
或者是更小的 例如改成7
image.png
只要内容超出我们的屏幕就可以显示load组件。

数据应该有18条，只刷新了一次就显示没有更多的数据了。
image.png
这里把当前页数打印出来看一下。
image.png
才触发了一次页码就变成3了。正常应该是2才对，应该是我们在上拉的事件里出了问题。
image.png
下面的console输出了 page++相当于page又进行了一次加加。
image.png
所以我们把console 的日志干掉就可以了，这样我们就可以正常的加载 了。
image.png
image.png

新问题，切换tab，加载提示消失

image.png
加一个等于0的或者条件
image.png

切换tab。这样就做好了一个翻页的效果。
image.png

结束