微信小程序实现上拉和下拉加载更多

    在上一篇文章中，我们知道了使用 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