小程序scroll-view滑動觸底

需求：當我們瀏覽到屏幕末尾時，加載出下一頁的內容。

小程序scroll-view文檔：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

---

注意實現細節：

1、 由於採用的是scroll-view 來實現，因此需要豎向滾動，那麼scroll-y 屬性的值就必須要設置成 true ,而且scroll-view 要能豎向滾動，必須要設置 高度(height).

2、當我們滾動到屏幕的底部時，會觸發bindscrolltolower 事件，lower-threshold 這個屬性用於控制距離屏幕底部還剩下多少像素時就開始觸發這個事件。

3、當滾動到屏幕頂部時會觸發 bindscrolltoupper 事件

4、由於bindscrolltolower 在一瞬間可能觸發多次，可能會導致發送多次請求來加載數據，我們必須要保證只能有一個請求去發送數據，因此需要用一個變量進行控制，詳情見 js 代碼中的 scrollToLower 方法。

---

wxml

<!--index.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.imgsrc}}'></image>
        <text class='created-at'>{{item.name}}</text>  
      </view>
    </view>  
  </block>  
  <view class='data-loading' hidden='{{hidden}}'>  
    數據加載中...  
  </view>  
</scroll-view>  

wxss

.scroll-view-container {  
  background-color: #fff;  
  height:100vh;  
}  

.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;  
}  
  

js

Page({
  data: {
    /** 
     * 用於控制當 scroll-view 滾動到底部時，顯示 “數據加載中...” 的提示 
     */
    hidden: true,
    /** 
     * 用於顯示文章的數組 
     */
    articles: [
      {
        imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg',
        name:'愛新覺羅.李四四1'
      },
      {
        imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg',
        name:'愛新覺羅.李四四2'
      },
      {
        imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg',
        name:'愛新覺羅.李四四3'
      },

    ],
    /** 
     * 數據是否正在加載中，避免用戶瞬間多次下滑到底部，發生多次數據加載事件 
     */
    loadingData: false
  },
  onLoad: function(options) {
    this.loadData(true);
  },
  loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: 'xxx',
      success: function(r) {
        var oldArticles = that.data.articles,
          newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles.concat(oldArticles);
        // tail爲true尾部合併，false頭部合併
        that.setData({
          articles: newArticles
        });
        //執行所傳方法
        if (callback) {
          callback();
        }
      },
      error: function(r) {
        console.info('error', r);
      },
      complete: function() {}
    })
  },
  /** 
   * 上滑加載更多 
   */
  scrollToLower: function(e) {
    console.log('上滑加載更多')
    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('上拉數據加載完成.');
    }, 1000);
  },
  scrollToUpper: function(e) {
    wx.showToast({
      title: '觸頂了...',
    })
  }
})

效果圖

 

---

原文：https://www.jianshu.com/p/9460ea67d57f