快速实现上滑加载更多

实现方式

在智能小程序的开发过程中，经常会遇到页面列表数量较多的情况，此时可以通过【分页】加载数据，并监听页面滑动到底部时触发【上滑加载更多】，从而增加页面首屏渲染速度。 想要实现这种分页展示数据，上滑加载更多的效果，主要有以下几种方式：

1. 使用 view自定义信息流组件 + onReachBottom

2. 使用 scroll-view + bindscrolltolower

3. 使用 smart-ui 中的feed信息流组件

4. 使用 swiper + scroll-view 自定义信息流组件 + bindscrolltolower

5. 使用 swiper + view 自定义信息流组件 + onReachBottom

6. 使用 page-feed 信息流模版

以下是具体方案中会使用到的组件或api：
 

组件/ api名称	描述	类型
scroll-view	滚动区域组件	原生组件
view	视图组件	原生组件
tabs	标签栏组件	原生组件
tabs-item	标签栏子项组件	原生组件
swiper	滑块视图容器	原生组件
swiper-item	滑块视图子项组件	原生组件
feed	信息流组件	扩展组件（smart-ui）
spin	加载状态组件	扩展组件（smart-ui）
page-status	页面状态组件	扩展组件（smart-ui）
page-feed	信息流模版	页面模版
onReachBottom	页面加载到底部时触发	页面事件函数
createSelectorQuery	返回一个 SelectorQuery 对象实例	swan api

针对不同的场景，可以使用不同的方式实现，下面我从四个常见的场景进行具体分析。

分场景描述

【场景一】

1. 场景特征：页面整体由一块滚动区域(A) + 上滑加载更多(B)组成

2. 场景展示：

3. 实现方案：

方案一：采用 page-feed 信息流模版实现

用百度开发者工具打开

关键代码：

<!-- feed 信息流 组件 -->
<smt-feed
    s-if="!showPageStatus"
    class="smt-feed pull-down-refresh"
    pull-to-refresh
    bind:refresh="onRefresh"
    bind:scrolltolower="scrollToLower"
    bind:scroll="scrollHandler"
    text="{
  {text}}"