微信小程序 scroll-view 完成上拉加载更多

我们经常在软件客户端上看到这么一个功能，当我们阅读信息浏览到文章的末尾时，通常会加载出更多的信息。比如，我们在简书客户端上浏览推荐文章时，浏览到屏幕的末尾，此时又加载出了另一页的推荐文章，即实现了上拉加载更多的功能。在小程序中，我们可以借助 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