在智能小程序的开发过程中，经常会遇到页面列表数量较多的情况，此时可以通过【分页】加载数据，并监听页面滑动到底部时触发【上滑加载更多】，从而增加页面首屏渲染速度。 想要实现这种分页展示数据，上滑加载更多的效果，主要有以下几种方式：
使用 view自定义信息流组件 + onreachbottom
使用 scroll-view + bindscrolltolower
使用 smart-ui 中的feed信息流组件
使用 swiper + scroll-view 自定义信息流组件 + bindscrolltolower
使用 swiper + view 自定义信息流组件 + onreachbottom
使用 page-feed信息流模版
以下是具体方案中会使用到的组件或api：
组件/ api名称
描述
类型
scroll-view
滚动区域组件
原生组件
view
视图组件
tabs
标签栏组件
tabs-item
标签栏子项组件
swiper
滑块视图容器
swiper-item
滑块视图子项组件
feed
信息流组件
扩展组件（smart-ui）
spin
加载状态组件
page-status
页面状态组件
page-feed
信息流模版
页面模版
createselectorquery
返回一个 selectorquery 对象实例
swan api
onreachbottom
页面加载到底部时触发
页面事件函数
针对不同的场景，可以使用不同的方式实现，下面我从四个常见的场景进行具体分析。
场景特征：页面整体由一块滚动区域(a) + 上滑加载更多(b)组成
场景展示：
实现方案：
用百度开发者工具打开
关键代码：
方案优势：
拿来即用，避免重复造轮子。npm i @smt-ui-template/page-feed 直接安装就可以使用，涵盖了【信息流图片懒加载】【下拉刷新页面】【上滑加载更多】【无网络、无内容、页面加载中状态页】等功能。
1）配置页面高度为整个视口高度
2）页面 onload 时获取首屏数据
3）监听页面onreachbottom时触发加载更多内容
1、自定义信息流组件和加载更多组件，可针对具体需求灵活处理
2、无三方组件引入，减少包体积
1、场景特征：页面整体由一块位置固定的区域(a) + 一块滚动区域(b) + 上滑加载更多(c)组成。
2、场景展示：
3、实现方案
1）为 feed 组件添加滚动区域的高度
2）初始化页面数据
3）实现 feed下拉刷新效果，如需要实现自动或手动执行下拉刷新效果，需在组件上添加 pull-to-refresh 关键字
4）进入页面时自动刷新
5）手动下拉刷新
6）实现上滑加载更多内容
1、使用feed组件，无需使用view自定义信息流组件，轻松实现下拉刷新页面，页面局部刷新等功能。
2、使用spin组件，无需使用view 自定义加载状态组件，快速实现上滑加载更多功能。
1）使用 scroll-vew 包裹滚动区域
2）scroll-view 外层的 dom 的高度需要用整个页面的高度减去固定区域的高度
3）通过scroll-view 上绑定的bindscrolltolower 方法，展示加载更多，并获取下一页数据，具体方法可参考【方案一-> 关键代码6】
4）自定义loading-more 组件，实现下拉加载更多效果
1、scroll-view组件是小程序原生组件，方式灵活，使用于页面任意滚动区域。
2、自定义 loading-more 组件，可针对具体需求实现组件样式，同时可减少三方组件的引入，减少代码体积。
1、场景特征：整个页面由 tabs 组件 (a) + swiper 组件(b)+ 自定义信息流组件(c) + 自定义加载更多组件(d)
3、实现方案:
1）页面结构
2）配置 swiper以及scroll-view 的高度
通过 scroll-view 上绑定的 bindscrolltolower 方法，展示加载更多，并获取下一页数据。具体方式可参考【方案一->关键代码6】。
1、使用 swiper + scroll-view 实现信息流在 swiper-item 中滚动，无需动态计算信息流高度。
2、切换 tab 时，能保留每个 tab 下用户上次浏览的位置。
2）动态计算 swiper 高度
3）swiper 以及 swiper-item 样式配置
4）监听页面滑动到底部时，触发 onreachbottom，执行加载更多操作
1、场景特征：一块固定区域(a) + tabs 多标签(b) + 展示区(c)，其中展示区域(c)与 tabs 一起滚动，当滑动到页面顶端时 tabs 吸顶，展示区域(c)内部滚动
3、实现方案：
1）tabs 组件定位为 sticky，swiper 高度为 100vh
2）通过动态配置 scroll-view 的 scroll-y 属性，实现信息流在 swiper-item 中滚动
3）页面获取 tabs 数据后，计算 tabs 组件的位置
4）默认页面监听页面滚动，当 tabs 组件滚动到顶部时，配置内容区域开始滚动： scroll-y 为 true
在上述的四种场景中，前两个场景功能较为简单，基本通过 view + onreachbottom 或者 scroll-view + bindscrolltolower 配合实现，后两个场景均属于多 tab + swiper 场景，功能包含了 tab 切换以及内容区的左右横滑等，功能较为复杂，但也是较为常用的信息流配合其他功能的组合打法，下面给出不同场景下，具体方案的优势和劣势，大家可以有针对性的选择不同的实现方案。
场景
方案
优势
劣势
场景一 （页面整体由一块滚动区域 + 上滑加载更多组成）
page-feed 信息流模版
拿来即用，快速实现信息流分页加载
场景单一，整个页面仅包含信息流和上滑加载更多
view 自定义信息流组件 + onreachbottom
方式灵活，可针对具体需求灵活处理
信息流功能均需要自己开发，成本较高
场景二 （页面整体由一块位置固定的区域 + 一块滚动区域 + 上滑加载更多组成）
smart-ui 中的 feed 信息流组件 + 加载状态组件
无需自定义信息流组件以及加载状态组件
feed 组件包含了 scroll-view 组件，默认会出现区域滚动区域，不适用【信息流跟随整个页面一起滚动】此类需求
scroll-view 自定义信息流组件 + 自定义上滑加载更多组件
方式灵活，可针对具体需求灵活处理，可配置 scroll-view 区域是否滚动
scroll-view 组件使用，需要参照官方文档，按照组件要求开发
场景三 （整个页面由 tabs + swiper + 自定义信息流组件 + 自定义加载更多组件组成）
tabs 组件 + scroll-view 自定义信息流组件+ swiper 组件
无需动态计算信息流高度,能保留每个 tab 下用户上次浏览的位置
1、使用到 swiper 组件多层级嵌套，样式需要准确书写<br>2、使用 swiper 需要一次性获取所有 tabs 下的数据，并且对数据格式有一定的要求（二维数组）
tabs 组件 + view 自定义信息流组件 + swiper 组件
每次请求下一页数据时，需要根据当前列表数据长度，动态计算 swiper 高度
场景四 （页面整个由一块固定区域 + tabs 多标签 + 一块展示区组成且tabs滚动到页面顶部时吸顶，展示区开始滚动）
tabs 组件 + swiper 组件 + scroll-view 自定义信息流组件
方式灵活，可适用大多数信息流分页展示场景
需要监听页面滚动，动态计算 tabs 位置，来设置 scroll-view 是否滚动