在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。
下拉加载更多:
1、在响应的 xxx.json 配置文件依次配置如下配置
>> enablePullDownRefresh:true 表示开启下拉刷新
>> backgroundTextStyle 下拉 loading 的样式,仅支持 dark/light
>> backgroundColor 窗口的背景色
2、上方后面2个没有设置好,在下拉时,页面顶部会出现一块白色的区域。
3、在下拉刷新时,不可使用 wx.showLoading 提示(其余的提示我没有测试),否则在 ios 下页面回弹过多,导致看不到顶部的那个提示页面刷新的区域。
4、页面下拉会触发 onPullDownRefresh 事件
5、防止 onPullDownRefresh 多次触发,导致多次请求
上拉加载更多:
1、在对应的 xxx.json 中配置(不是必须的)
>> onReachBottomDistance 页面上拉触底事件触发时距页面底部距离,单位为px
2、页面上拉在小于或等于 onReachBottomDistance 的距离时,会触发 onReachBottom 事件
实现效果:
代码实现:
1、页面布局 loadMore.wxml 文件的编写
<view class='view-container'> <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> </view>
2、样式编写 loadMore.wxss 文件的编写
.view-container { background-color: #fff; } .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 控制 loadMore.js 文件的编写
Page({ data: { /** * 需要访问的url */ urls: [ 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0', 'https://www.csdn.net/api/articles?type=new&category=arch', 'https://www.csdn.net/api/articles?type=new&category=ai', 'https://www.csdn.net/api/articles?type=new&category=newarticles' ], /** * 当前访问的url索引 */ currentUrlIndex: 0, /** * 获取到的文章 */ articles: [], /** * 控制上拉到底部时是否出现 "数据加载中..." */ hidden: true, /** * 数据是否正在加载中,避免数据多次加载 */ loadingData: false }, onLoad: function(options) { this.loadData(false); }, /** * 加载数据 */ loadData: function(tail, callback) { var that = this, urlIndex = that.data.currentUrlIndex; wx.request({ url: that.data.urls[urlIndex], success: function(r) { var oldArticles = that.data.articles, newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles; that.setData({ articles: newArticles, currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1 }); if (callback) { callback(); } }, error: function(r) { console.info('error', r); }, complete: function() {} }); }, /** * 监听用户下拉动作 */ onPullDownRefresh: function() { console.info('onPullDownRefresh'); var loadingData = this.data.loadingData, that = this; if (loadingData) { return; } // 显示导航条加载动画 wx.showNavigationBarLoading(); // 显示 loading 提示框,在 ios 系统下,会导致顶部的加载的三个点看不见 // wx.showLoading({ // title: '数据加载中...', // }); setTimeout(function() { that.loadData(false, () => { that.setData({ loadingData: false }); wx.stopPullDownRefresh(); // wx.hideLoading(); wx.hideNavigationBarLoading(); console.info('下拉数据加载完成.'); }); }, 1000); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { console.info('onReachBottom'); 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('上拉数据加载完成.'); }, 1000); } })
4、配置文件 loadMore.json 的编写
{ "navigationBarTitleText": "上拉刷新和下拉加载更多", "enablePullDownRefresh": true, "onReachBottomDistance": 0, "backgroundTextStyle": "dark", "backgroundColor": "#c0d9ff" }
完整代码:
微信小程序实现上拉和下拉加载更多代码:https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more
相关推荐
微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
微信小程序-微信小程序实现类似android下拉刷新上拉加载更多ListView.zip
微信小程序里的listview,内置了上拉刷新下拉加载更多的功能,以及页面状态显示 适用于页面内有一个可上拉刷新下拉加载的list的情况 使用 1.拷贝lib文件夹到根目录 2.拷贝utils中的lvUtil和netUtil到你的utils文件夹 3...
微信小程序UI设计实例,今天分享给大家的是上拉加载 下拉刷新,这个功能在微信中还是比较常见的,大家也习惯了操作时候下拉屏幕刷新内容,上拉则加载更多内容,这个功能在Android智能机上已经得到了很好的应用,这个...
通过微信小程序的滑块视图容器swiper及swiper-item实现tab切换功能,同时实现下拉刷新,上拉加载更多功能。
WeChartPullToRefreshListView 微信小程序实现类似android下拉刷新上拉加载更多ListView 下拉刷新 上拉加载更多
微信小程序学习用demo:cnode:API使用与下拉加载更多(源代码+截图)微信小程序学习用demo:cnode:API使用与下拉加载更多(源代码+截图)微信小程序学习用demo:cnode:API使用与下拉加载更多(源代码+截图)微信小程序...
oadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而...列表滚动到底部时,继续往上拉,加载更多内容
可以支持下拉加载,通过接口接收自己的后台的数据
微信小程序Demo–吃货APP(上拉加载更多,下拉刷新)是一个功能丰富且易于定制的源码项目。它为开发者提供了一个直观的平台,用于学习、实践以及优化小程序开发中的各种关键技术。 该Demo的核心功能围绕“吃货”...
微信小程序-模仿APP(上拉加载更多,下拉刷新)Demo
这是一个微信i小程序界面操作特效:上拉刷新下拉加载效果源码,在很多android应用中也有此功能,微信小程序依托安卓环境运行的微信程序中,当然也具备这种功能,本实例将带你学习这种下拉刷新上拉加载效果如何实现,...
微信小程序-吃货APP(上拉加载更多,下拉刷新).zip 微信小程大好商城,wechat-weapp.zip 微信小程序-移动端商城.zip 微信小程序的掘金信息流.zip 微票源码-demo.zip 技术社区-demo.zip 果库.zip 爆米花popcorn.zip ...
微信小程序,使用scroll-view实现下拉加载更多(下一页)源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
工作之余撸的一个微信小程序,数据抓自干货集中营API,实现了数据请求,列表展示,下拉刷新,下拉加载更多等,刚开始接触的可以看下,https://github.com/JustYJQ/smallApp(欢迎大家star) 在开始编写微信小程序前,...
微信小程序--健康菜谱 基于微信小程序的一个查找检索菜谱的应用 效果 功能 分类检索菜谱 发现最新菜谱 ...scrollview下拉加载更多 ... 待解决 动态改变标题栏的标题并不能生效,原因未知,具体代码中有注释
微信小程序实战视频课程(下拉刷新页面 加载更多分页)课件资料
上拉加载更多 轮播图 等... 数据接口: 使用本地数据 目录结构: data — 存放本地数据 images — 存放项目图片 pages — 存放项目页面相关文件,包括answer,chat,discovery,index,more,notify,question等页面 ...
当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧。 不管微信小程序是否...