首页 建站教程 前端学院

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

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

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

使用 onReachBottom 实现

使用 scroll-view 组件实现

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

使用 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.initData();
}

使用 scroll-view 组件实现

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

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

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

代码解析

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

``` 
<view class="intro">
    <scroll-view
     class="scrollview"
     scroll-y
     bindscrolltolower="scrolltolower"
    >
        <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>
    </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>

2、在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>

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

// 给image添加load事件,保证图片全部加载出来再计算swiper-item的高度并赋值给swiper
imageLoad() {       
    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();
}

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

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

总结

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


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




评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    CSS3 Loading英文加载动画效果

    CSS3 Loading英文加载动画效果

     2020-09-28 166

    CSS3 Loading英文加载动画效果是一款正在加载中,请您耐心等待...

    css3悬停按钮变形发光特效

    css3悬停按钮变形发光特效

     2020-07-22 166

    css3悬停按钮变形发光特效是一款基于css3 transform属性制作的四款不同方向按钮效果。

    CSS3图片放大阴影遮罩层特效

    CSS3图片放大阴影遮罩层特效

     2020-09-28 133

    CSS3图片放大阴影遮罩层特效是一款鼠标悬停图片列表立体阴影和图片内部放大遮罩层特效。

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

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

     2020-09-30 64

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

    jQuery点击图片相册滑出放大展示

    jQuery点击图片相册滑出放大展示

     2020-09-27 183

    jQuery点击图片相册滑出放大展示是一款仿Google Play滚动效果插件plusview.js。

    ThinkPHP5实现图片水印平铺效果

    ThinkPHP5实现图片水印平铺效果

     2020-09-23 90

    我们有时需要对推片打上水印,防止别人盗用,thinkphp 自己的水印功能只能选择位置添加水印,但是有时候图片某些位置比较干净(空白部分),很容易处理掉,这样就无法起到防止盗用图片的效果。这篇教程分享一下使用 ThinkPHP5 实现图片水