智能小程序——四种快速实现更多上拉和触下加载效果的方法

在开发智能小程序的过程中，上拉加载是一种非常常见的加载效果。最近，开发人员在开发上拉加载时遇到了一些问题。今天的内容将向您介绍，如果我们想要实现上拉加载的以下效果，我们需要如何做。

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

使用onrechbutton使用滚动视图组件和信息流模板实现上拉加载，使用swiper组件使用onrechbutton实现上拉加载。

使用 onReachBottom 实现

智能小程序提供OnReachButton，即页面上拉底事件的处理功能。您可以利用Page中定义的onReachBottom处理函数来监控用户在页面上的上拉和自下而上事件，从而实现上拉加载。

为了方便大家直接看到效果，下面的代码片段可以直接导入到开发人员的工具中运行和查看：

swanide ://fragment/7e 944 c 0 c 3785 bbdf 4437 c 672 DD 0 DC 8 e 41584413934361

工具下载链接：Windows/mac

代码解析

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 class=' loading '尝试加载./view在js文件中使用onReachBottom事件，当页面滑动到页面底部时，请求下一页显示数据，即达到上拉加载的效果。

.onReachButton(){//继续请求下一页显示的数据this.initData()当它到达底部时；}有关更多信息，请参见每一页底部。

使用 scroll-view 组件实现

使用滚动视图组件实现上拉加载也是一种非常常见的方法，步骤与使用onReachBottom事件类似。

Scroll-view是百度智能小程序提供的一个组件，可以实现尝试区域的水平和垂直滚动。利用其bindscrolltolower属性，当页面滚动到底部或右侧时，会触发scrolltolower事件，从而达到上拉加载的效果。

为了方便大家直接看到效果，下面的代码片段可以直接导入到开发人员的工具中运行和查看：

swanide ://fragment/fccd 71 b 098 a7 d 3921 b 9958 CCD 9 DBA 1071584414516291

代码解析

使用swan文件中的滚动视图组件设置商品的显示样式。当页面滑动到底部时，会触发scrolltolower事件，以实现尝试区域的垂直滚动。

view class=' intro ' scroll-view class=' scroll view ' scroll-y bindscrolltolower=' scroll tolower ' view class=' goodsList ' view s-for=' item，index in goods '

lt;view class="goodsItem"> <view class="goodsImage"> <image src="{{item.img}}"></image> </view> <view class="goodsTitle"> <text>{{item.title}}</text> </view> </view> </view> </view> <view class="loading">努力加载中...</view> </scroll-view></view>

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

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

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

npm i @smt-ui-template/page-feed

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

npm i

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

swanide://fragment/71af2b7f470b29b13f792c417fc5f03c1588757790402

代码解析

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

<smt-feed        class="smt-feed pull-down-refresh"        pull-to-refresh        bind:scrolltolower="scrollToLower"        text="{{text}}"        style="height: 100vh" <!-- 信息流组件作为局部滚动组件，必须在它的父级或本身指定高度 -->    >        <view class="goodsList">            <view 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>            </view>        </view>        <smt-spin status="{{status}}" bind:tap="reload"></smt-spin></smt-feed>

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

...    ...    async scrollToLower() {        const goods = await this.initData();        await syncSetData(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时，实现效果如下：

   

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

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

<swiper class="swiper" style="height: {{swiperH}}" current="{{currentTab}}" bindchange="swiperChange">        <swiper-item class="item">            <view class="goodsList">                <view s-for="item,index in goods">                    <view class="goodsItem">                        <view class="goodsImage">                            <image bindload="imageLoad" src="{{item.img}}"></image>                        </view>                        <view class="goodsTitle">                            <text>{{item.title}}</text>                        </view>                    </view>                </view>            </view>            <view class="loading">努力加载中...</view>        </swiper-item>        <swiper-item class="item">            <view class="goodsList">                <view 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>                </view>            </view>            <view class="loading">努力加载中...</view>        </swiper-item></swiper>

1. 在 js 文件中设置 swiper 组件的高度。

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

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

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

总结

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