微信小程序上拉加载流程_小程序盒子上滑到透明盒子

微信小程序上拉加载流程

1.首先需要在微信官方文档把scroll-view这个方法引入进来，然后使用这个方法，在样式里面写scroll-y，代表的是上下滑动，然后给滑动的盒子一个高度，100vh，然后开启bindscrolltolower这个事件，给他一个事件名，这个事件代表的意思是到达底部的时候触发

2.在滑动的标签里面先三个样式，在上拉的时候需要用到，第一个：是加载中：loading，第二个：是没有更多啦：noMore，第三个是：数据加载失败：loadingFailed：把这三个都用if判断给他们判断一个，在js文件里面默认值都定为false，

3.loading：需要定义一个开关，要不然第一次数据还没加载出来，还继续往上拉的话，它还会请求数据加载，这样就会增加服务器的压力，首先给他定义为false，先让开关是开着的，等第一页数据显示出来，往上拉的时候让开关是关闭的状态，只有请求到第二页的数据的时候在让它打开，请求到第二页数据的时候需要拼接在第一页后面，请求到第二页数据的时候，又让开关关闭

4.noMore：首先定义为false，它定义为false的意思是当我们循环的数据没有啦，也就是拉到最后面没有数据显示啦，让他显示没有数据啦

5.loadingFailed：首先也是定义为false，它定义的意识是当请求不到网络，没有网的时候，或者请求超时的时候，让他显示加载失败

6.把这三个时间先定义到以后，下面来说一下上拉加载js里面的思路

6.1：首先写一个函数来封装上拉加载的代码，为了就是在别的地方用到的时候直接调用，比较方便

6.2：函数写好以后，里面会传一个参数，这个参数的含义就是为了判断开始的时候页面显示的是不是第一页的数据，通过这个参数可以拿到我们需要的两个参数，type和page，在请求数据的时候需要用到这两个参数，拿到这两个参数以后，赋值给 接口自带的两个参数，

6:3：请求数据成功，调用.then这个方法，下面开始判断，如果请求到的不是第一页的数据，就让他拼接，等加载完成，请求到第二页的数据以后让他拼接，通过concat这个关键字，开关打开，否则让他显示第一页的数据

7.下一步判断，如果请求的数据长度等于0的话，说明已经没有数据啦，让noMore等于false，显示没有数据啦

8.接口请求失败或者没有网络，请求超时的话，调用catah这个方法，让loadingFailed: true，显示加载失败

9.接下来写滑动到底部的事件，用我们刚才写的事件名scrollToLower，在写一个函数，传一个参数，通过这个参数可以拿到我们需要的type和page这两个参数，然后赋值给接口自带的两个参数，到达底部的时候，也就是我们上拉请求第二页数据的时候，当请求到第二页数据的时候，让他的页数加1，然后调用请求数据这个接口，让数据渲染到页面