四种方式快速实现上滑触底加载更多效果

作者：小花
github链接：https://github.com/mengbodi/swan/issues/1

加入我们

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

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

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

1. 使用 onReachBottom 实现
2. 使用 scroll-view 组件实现
3. 使用信息流模板实现上拉加载
4. 使用 swiper 组件配合 onReachBottom 实现上拉加载

使用 onReachBottom 实现

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

为方便大家直接使用看到效果，将下述代码片段，直接导入开发者工具中运行查看即可：
swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361

工具下载链接：Windows /mac

代码解析

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

    <view class="goodsList">
       <block s-for="item,index in goods">
           <view class="goodsItem">
               <view class="goodsImage">
                   <image src="{
       
       {item.img}}"></image>
               </view>
               <view class="goodsTitle">
                   <text>{
       
       {item.title}}</text>
               </view>
           </view>
       </block>
   </view>
   <view class="loading">努力加载中...</view>
   

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

   ...
   ...
   onReachBottom() {
        
        
       //触底时继续请求下一页展示的数据
       this