四种方式快速实现上拉触底加载效果
作者:小花 ,github链接:https://github.com/mengbodi/swan/issues/1
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现上拉加载,我们需要如何去做。
以下是为大家总结的四种常见的实现方式:
使用 onReachBottom 实现
智能小程序提供了onReachBottom
,即页面上拉触底事件的处理函数。可以拿在 Page 中定义 onReachBottom 处理函数,监听该页面用户上拉触底事件,从而实现上拉加载。
为方便大家直接使用看到效果,将下述代码片段,直接导入开发者工具中运行查看即可:
swanide://fragment/7e944c0c3785bbdf4437c672dd0dc8e41584413934361
代码解析
-
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>
-
在 js 文件中使用
onReachBottom
事件,当页面滑动到页面底部时,请求下一页展示数据,即实现上拉加载的效果。... ... onReachBottom() { //触底时继续请求下一页展示的数据 this.initData(); }
更多内容参见onReachBottom
使用 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
代码解析
- 在 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>
- 在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
代码解析
-
根据实际场景需要在 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>
- 在 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>
- 在 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(); }
- 在 js 文件中使用
onReachBottom
事件,当页面滑动到页面底部时,请求下一页展示数据,即实现上拉加载的效果。
onReachBottom() { this.initData(); },
总结
使用方法 1、2、3 可快速实现简单页面的上拉加载;而使用方法 4 可实现页面中存在多个 tab 的场景,比如:最新、最热列表的切换。开发者可根据实际情况选择不同的实现方法。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
如何在阿里云上部署django网站
如何搭建一个自己的网站 1 购买域名 我们通过电脑访问某一个网站,比如说访问必应,只需要在浏览器的地址栏内输入“www.bing.com”,就能够看到必应的主页。那么,如果我们想自己建设一个网站,让其他用户在地址栏内输入一个地址就能看到我们的网站的话,我们首先需要一个域名。域名哪里来?需要我们去购买(也有一些网站会提供免费的二级域名,但一方面用起来不方便,另一方面,一个域名并不贵,省下一顿下馆子的钱就能买一个域名,为什么不去做呢?)。阿里云提供了购买域名的渠道。 登陆万网:https://wanwang.aliyun.com?userCode=28kqeewo,按照步骤操作,可以很方便地购买一个域名。 另外说一句,在国内购买域名是需要进行备案的。手续不复杂,按照网站说明一步步操作即可。大概需要等1个月的备案时间。 2 购买服务器空间和ip地址 域名是我们平日里输入在地址栏的那一串英文字符,相当于我们自己家的门牌号。有了门牌号,就可以找到我们家。但是,我们家必须得有一个实体的地方,里面放了家具等等,客人来了才能参观做客。因此,单单有门牌号还不够,我们需要一个网络空间,来放置我们的东西。...
- 下一篇
Smart Retry 1.3.7 发布,声明式的异步持久化重试框架
Smart Retry 主要是用来进行方法重试的。和 Guava Retry、Spring Retry 相比,Smart Retry 最大的特点是异步重试,支持持久化,系统重启之后可以继续重试。 如果你是做后台微服务的,一定会有用到的场景,千万不要错过。 本次更新 1:优化了内部生成 Aop 代理的逻辑 最新的 jar 已经 deploy 到 maven 的中央仓库了 Smart Retry 1.3.7,欢迎使用
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS8安装Docker,最新的服务器搭配容器使用
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- 设置Eclipse缩进为4个空格,增强代码规范
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群