在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。
下拉加载更多:
1、在响应的 xxx.json 配置文件依次配置如下配置
>> enablePullDownRefresh:true 表示开启下拉刷新
>>onReachBottomDistance:0
>> 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 {
- #fff;
- }
- .data-loading {
- height: 100rpx;
- line-height: 100rpx;
- #eee;
- text-align: center;
- font-size: 14px;
- }
- .articles-container {
- border-bottom: 1px solid #eee;
- margin: 30rpx 10rpx;
- #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