uniapp里面分页加载数据，下方的加载方式的两种方法的总结

概要

在一些页面中，当画滑到商品底部，会出现“加载更多”的字样，
在这里插入图片描述

之后变成“正在加载”的旋转动画

也叫数据懒加载，用户滑到哪里，才加载所需要的数据。

组件

uview里面的组件
和uni-app里面扩展组件
是一样用法。

用法

第一种用法是内容高度没有固定， 放到底部


加载前值为loadmore，加载中为loading，没有数据为nomore
初始状态为loadmore

刚进入此页面调接口请求数据


页面滚到最底部，再次调用此方法

第二种用法是固定高度，在固定导读里面进行滚动

在scroll-view里面可滚动区域里面滚动，里面包含数据列表v-for循环渲染，底部加载动画。

商品列表数据
加载动画状态，加载前的状态


1.刚进入页面，在onShow中会调用获取商品数据的方法，里面进行判断加载状态，加载状态默认值为加载前，所以执行下面的事情将加载状态赋值为加载中，然后请求数据，请求的参数是数据长度和几条数据，请求回来的数据进行判断，4001是没登录，就去登录。请求回来的data.lists里面长度大于0，就是有数据，则把数据拼接到之前那数据变量中，加载状态变为加载前的转态。之后页面数据就会显示出来。

2.当滑到数据底部，进入scroll-view组件里面@scrolltolower="lower"滑动底部事件调用,此时进行加载的状态判断，不是加载中，和没有数据的转台，
进行赋值，加载中状态。此时请求数据，传参是，之前数据列表的长度，在加条数。相当与。请求后台数据的第一次请求的数据的后面的几条数据，然后4001是没登录，就去登录。请求回来的data.lists里面长度大于0，就是有数据，则把数据拼接到之前那数据变量中，加载状态变为加载前的转态。之后页面数据就会显示出来第二次的数据。如此不断循环不断地取之前的数据后面的几条。再拼接之前的数据赋值。只到最后取回来的数据为空，加载状态为没有数据了的状态。判断return false结束。就是这个逻辑。

小结

提示：这里可以添加总结

例如：

提供先进的推理，复杂的指令，更多的创造力。