小程序实现滚动加载分页处理

如何实现小程序的滚动加载

在商城的开发过程中。后台不可能一次返回所有数据给我们。这时候我们需要进行分页请求，也就是常说的滚动加载功能。

使用小程序页面中的onReachBottom钩子函数

在小程序的app.json中配置window对象中onReachBottomDistance，表示距离底部多少px执行滚动逻辑。这种方式适合于全屏滚动的业务场景

 <view wx:for ="{
  {userList}}">
   <text>{
  {item.name}}</text>
   <text>{
  {item.age}}</text>
 </view>

使用scroll-view组件进行滚动加载

当页面分为多个区块。而滚动区域的高度不是全屏滚动的时候我们可以使用小程序为我们定制的scroll-view组件进行代码开发。具体内容可以参考:小程序组件文档.

scroll-view组件代码如下:

 <view class="tab">
   <view>内容一</view>
   <view>内容二</view>
  </view>
	<scroll-view  style