四种方式快速实现上拉触底加载效果

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

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

使用 onReachBottom 实现

使用 scroll-view 组件实现

使用信息流模板实现上拉加载

使用 swiper 组件配合 onReachBottom 实现上拉加载

使用 onReachBottom 实现

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

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

工具下载链接：Windows/mac

代码解析

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

<viewclass="goodsList"><blocks-for="item,indexingoods"><viewclass="goodsItem"><viewclass="goodsImage"><imagesrc="{{item.img}}"></image></view><viewclass="goodsTitle"><text>{{item.title}}</text></view></view></block></view><viewclass="loading">努力加载中...</view>

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

......onReachBottom(){//触底时继续请求下一页展示的数据this.initData();}使用 scroll-view 组件实现

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

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

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

代码解析

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

```<viewclass="intro"><scroll-viewclass="scrollview"scroll-ybindscrolltolower="scrolltolower"><viewclass="goodsList"><views-for="item,indexingoods"><viewclass="goodsItem"><viewclass="goodsImage"><imagesrc="{{item.img}}"></image></view><viewclass="goodsTitle"><text>{{item.title}}</text></view></view></view></view><viewclass="loading">努力加载中...</view></scroll-view></view>```使用信息流模板实现上拉加载

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

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

npmi@smt-ui-template/page-feed

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

npmi

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

代码解析

1、在 swan 文件中使用信息流模板，通过 smt-spin 组件加载更多数据。

<smt-feedclass="smt-feedpull-down-refresh"pull-to-refreshbind:scrolltolower="scrollToLower"text="{{text}}"style="height:100vh"><!--信息流组件作为局部滚动组件，必须在它的父级或本身指定高度--><viewclass="goodsList"><views-for="item,indexingoods"><viewclass="goodsItem"><viewclass="goodsImage"><imagesrc="{{item.img}}"></image></view><viewclass="goodsTitle"><text>{{item.title}}</text></view></view></view></view><smt-spinstatus="{{status}}"bind:tap="reload"></smt-spin></smt-feed>

2、在js文件中，利用在smt-spin组件上绑定的事件，实现加载更多的数据。

......asyncscrollToLower(){constgoods=awaitthis.initData();awaitsyncSetData(this,{goods:goods.concat(this.data.goods||[])});},......使用 swiper 组件配合 onReachBottom 实现上拉加载

使用 swiper 组件配合 onReachBottom 的实现方法也比较常见，相较上边两种实现方式有些复杂，但同时也可以实现更加复杂的上拉加载场景。

swiper组件是智能小程序提供的滑块视图组件，与swiper-item组件配合使用，可实现 swiper 组件内 swiper-item 的滑动。需要动态设置 swiper 组件的高度，来保证每次滑动到底时都能触发 onReachBottom 。

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

代码解析

1、根据实际场景需要在 swan 文件中设置 tab，当设置多个tab时，实现效果如下：

<viewclass="swiper-tab"><viewclass="tab-item{{currentTab==0?'on':''}}"data-current="0"bindtap="swiperNav">Tab1</view><viewclass="tab-item{{currentTab==1?'on':''}}"data-current="1"bindtap="swiperNav">Tab2</view></view>

2、在 swan 文件中使用 swiper、swiper-item 组件。

<swiperclass="swiper"style="height:{{swiperH}}"current="{{currentTab}}"bindchange="swiperChange"><swiper-itemclass="item"><viewclass="goodsList"><views-for="item,indexingoods"><viewclass="goodsItem"><viewclass="goodsImage"><imagebindload="imageLoad"src="{{item.img}}"></image></view><viewclass="goodsTitle"><text>{{item.title}}</text></view></view></view></view><viewclass="loading">努力加载中...</view></swiper-item><swiper-itemclass="item"><viewclass="goodsList"><views-for="item,indexingoods"><viewclass="goodsItem"><viewclass="goodsImage"><imagesrc="{{item.img}}"></image></view><viewclass="goodsTitle"><text>{{item.title}}</text></view></view></view></view><viewclass="loading">努力加载中...</view></swiper-item></swiper>

3、在 js 文件中设置 swiper 组件的高度。

//给image添加load事件，保证图片全部加载出来再计算swiper-item的高度并赋值给swiperimageLoad(){letlen=this.data.goods.length;this.setData({imgLoadNum:++this.data.imgLoadNum})if(this.data.imgLoadNum===len){this.queryNodeInfo();}},//设置swiper的高度，如果不动态设置swiper的高度，当页面滑动到底部时，不会触发onReachBottomqueryNodeInfo:function(){letcurrentTab=this.data.currentTab;swan.createSelectorQuery().selectAll('.item').boundingClientRect((rect)=>{this.setData({swiperH:rect[currentTab].height+'px'})}).exec();}

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

onReachBottom(){this.initData();},总结

使用方法 1、2、3 可快速实现简单页面的上拉加载；而使用方法 4 可实现页面中存在多个 tab 的场景，比如：最新、最热列表的切换。开发者可根据实际情况选择不同的实现方法。

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