我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息。比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉加载更多的功能。在小程序中,我们可以借助 scroll-view 来实现这个功能,当然也可以使用别的方法来实现。
需求:
当我们浏览到屏幕末尾时,加载出下一页的内容。
注意实现细节:
1、 由于采用的是 scroll-view 来实现,因此需要竖向滚动,那么 scroll-y 属性的值就必须要设置成 true ,而且scroll-view 要能竖向滚动,必须要设置 高度(height).
2、当我们滚动到屏幕的底部时,会触发 bindscrolltolower 事件,lower-threshold 这个属性用于控制距离屏幕底部还剩下多少像素时就开始触发这个事件。
3、当滚动到屏幕顶部时会触发 bindscrolltoupper 事件
4、由于 bindscrolltolower 在一瞬间可能触发多次,可能会导致发送多次请求来加载数据,我们必须要保证只能有一个请求去发送数据,因此需要用一个变量进行控制,详情见 js 代码中的 scrollToLower 方法。
实现效果:
代码实现:
1、wxml文件的编写
<scroll-view class='scroll-view-container' scroll-y='{{true}}' bindscrolltolower='scrollToLower' bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='0'> <block wx:for='{{articles}}' wx:key='{{item.id}}'> <view class='articles-container'> <view class='info'> <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}} <text class='created-at'>{{item.created_at}}</text> <text class='category'>{{item.category}}</text> </view> </view> </block> <view class='data-loading' hidden='{{hidden}}'> 数据加载中... </view> </scroll-view>
注意:
1、scroll-y 的值需要设置成 true
2、scroll-view 必须要设置 height 的值
2、wxss文件的编写
.scroll-view-container { background-color: #fff; height:100vh; } /** 隐藏 scroll-view 的滚动条 */ /* ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } */ .data-loading { height: 100rpx; line-height: 100rpx; background-color: #eee; text-align: center; font-size: 14px; } .articles-container { border-bottom: 1px solid #eee; margin: 30rpx 10rpx; background-color: #eee; } .articles-container .info { font-size: 12px; margin: 20rpx 0rpx; height: 100%; display: inline-block; } .articles-container .info .avatar { width: 60rpx; height: 60rpx; margin-right: 10rpx; border-radius: 60rpx; display: inline-block; vertical-align: middle; } .articles-container .info .created-at { margin: 0px 20rpx; display: inline-block; vertical-align: middle; } .articles-container .info .category { color: #3399ea; display: inline-block; vertical-align: middle; }
3、js文件的编写
Page({ data: { /** * 用于控制当 scroll-view 滚动到底部时,显示 “数据加载中...” 的提示 */ hidden: true, /** * 用于显示文章的数组 */ articles: [], /** * 数据是否正在加载中,避免用户瞬间多次下滑到底部,发生多次数据加载事件 */ loadingData: false }, onLoad: function(options) { this.loadData(true); }, loadData: function(tail, callback) { var that = this; wx.request({ url: 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0', success: function(r) { var oldArticles = that.data.articles, newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles.concat(oldArticles); that.setData({ articles: newArticles }); if (callback) { callback(); } }, error: function(r) { console.info('error', r); }, complete: function() {} }) }, /** * 上滑加载更多 */ scrollToLower: function(e) { console.info('scrollToLower', e); var hidden = this.data.hidden, loadingData = this.data.loadingData, that = this; if (hidden) { this.setData({ hidden: false }); console.info(this.data.hidden); } if (loadingData) { return; } this.setData({ loadingData: true }); // 加载数据,模拟耗时操作 wx.showLoading({ title: '数据加载中...', }); setTimeout(function() { that.loadData(true, () => { that.setData({ hidden: true, loadingData: false }); wx.hideLoading(); }); console.info('上拉数据加载完成.'); }, 2000); }, scrollToUpper: function(e) { wx.showToast({ title: '触顶了...', }) } })
注意:
1、在scrollToLower方法中需要防止多次加载。
4、导航栏标题文字内容
{ "navigationBarTitleText": "scroll-view的上拉刷新" }
完整代码:
scroll-view 完成上拉加载更多代码: https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/scroll-view-pull-up-refresh
相关推荐
微信小程序,使用scroll-view实现下拉加载更多(下一页)源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有 封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多 > 效果图: 启动欢迎页,几行代码可实现旋转与缩放:...
基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画,有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱:. 只要...
运行环境 开发工具:微信web开发者工具 版本: 微信web开发者工具 v0.12.130400 ...2、上啦加载更多,太过于灵敏,这个我猜测应该是小程序自身的问题。 3、新闻详情页面是一个网页,但是小程序不支持HT
仿豆瓣图书微信小程序开源源代码,页面显示获取设备屏幕高度,以适配scroll-view组件高度,80为顶部搜索框区域高度 rpx转px 屏幕宽度/750,刷新下拉可改变变色球颜色很不错的特效。部分代码注释: scrollHeight: 0...
微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不...
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
我发现微信小程序远程组件提供了一个scroll-view(可滚动视图区域),这个组件中有个属性,bindscrolltolower能够监听区域内滑到了最后一个位置。这就能用来解决和实现我们提出的问题。当用户滑到最后一个元素,触发...
【配置简单】仅需两步(绑定网络请求方法、绑定分页结果数组)轻松完成完整下拉刷新,上拉加载更多功能。 【低耦合,低侵入】分页自动管理。在page中无需处理任何分页相关逻辑,无需在data中定义任何分页相关变量,...
首先判断一下,服务器是否还有更多数据,有就继续加载,没有就终止程序 使用我们每次数据请求的skip参数,判断累加是否超过总的数据条数 滚动加载: 从第几张开始,加载多少张 实现:使用scroll-view滚动视图标签...
scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 (此图片来源于网络,如有侵权,请联系删除! ) 3.scrol-view需要指定一个高度,这个高度可以按自己的...
scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗—-显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且...
本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 (此图片来源于网络,如有侵权,请联系删除! ) (此图片来源于网络,如有侵权,请联系删除! ) 大致如此的界面吧。 这个Demo使用了微信...