作者：小花github链接：https://github.com/mengbodi/s...

更多内容请前往智能小程序开发者社区查看

在智能小程序的开发过程中，上拉加载是一种十分常见的加载效果，最近也收到了一些开发者在开发上拉加载时遇到的问题，今天的内容就为您介绍一下如果想实现下述效果的上拉加载，我们需要如何去做。

以下是为大家总结的四种常见的实现方式：

智能小程序提供了onReachBottom，即页面上拉触底事件的处理函数。可以拿在 Page 中定义 onReachBottom 处理函数，监听该页面用户上拉触底事件，从而实现上拉加载。

工具下载链接：Windows /mac

swan 文件是每个智能小程序页面的展现模板，类似于 Web 开发中的 HTML，所以我们先在 swan 文件中设置商品的展现样式：

在 js 文件中使用onReachBottom事件，当页面滑动到页面底部时，请求下一页展示数据，即实现上拉加载的效果。

利用 scroll-view 组件实现上拉加载也是一种十分常见的方法，实现步骤与使用onReachBottom事件类似。

scroll-view是百度智能小程序提供的组件，可实现试图区域的横向滚动和竖向滚动。使用它的bindscrolltolower属性，当页面滚动到底部或右边的时候，则会触发scrolltolower事件，从而实现上拉加载的效果。

在 swan 文件中使用 scroll-view 组件，设置商品的展现样式。当页面滑动至底部时，触发scrolltolower事件，实现试图区域的竖向滚动。

信息流模版是百度智能小程序提供的组件，可配置上拉刷新、列表加载、上拉加载功能，适用于列表信息展示，并可放置在页面的任何部分。

与其它组件功能不同，使用信息流模板时需执行下述命令行，引入页面模板。

并在进入page-feed文件夹后，执行下述命令行安装所有模板依赖。