幾行代碼摸清楚上拉加載原理

做者：chanwahfung

https://www.cnblogs.com/chanwahfung

效果

貼上效果展現：

實現思路

樣式方面很少贅述，滾動區域是給固定高度，設置 overflow-y: auto 來實現。

接下來看看js方面的實現，其實也很簡單，觸發的條件是：可視高度 + 滾動距離 >= 實際高度 。例子我會使用vue來實現，和原生實現是同樣的。

• 可視高度(offsetHeight)：經過 dom 的 offsetHeight 得到，表示區域固定的高度。這裏我推薦經過 getBoundingClientRect() 來獲取高度，由於使用前者會引發瀏覽器迴流，形成一些性能問題。
• 滾動高度(scrollTop)：滾動事件中經過 e.target.scrollTop 獲取，表示滾動條距離頂部的px
• 實際高度(scrollHeight)：經過 dom 的 scrollHeight 得到，表示區域內全部內容的高度（包括滾動距離），也就是實際高度

基礎實現

onScroll(e) {
    let scrollTop = e.target.scrollTop
    let scrollHeight = e.target.scrollHeight
    let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
    let currentHeight = scrollTop + offsetHeight
    if (currentHeight >= scrollHeight) {
        console.log('觸底')
    }
}

so easy~

加點細節

加點細節，如今咱們但願是離底部必定距離就觸發事件，而不是等到徹底觸底。若是你作太小程序，這和onReachBottom差很少的意思。

聲明一個離底部的距離變量reachBottomDistance

這時候觸發條件：可視高度 + 滾動距離 + reachBottomDistance >= 實際高度

export default {
  data(){
    return {
      reachBottomDistance: 100
    }
  },
  methods: {
    onScroll(e) {
        let scrollTop = e.target.scrollTop
        let scrollHeight = e.target.scrollHeight
        let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
        let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
        if (currentHeight >= scrollHeight) {
            console.log('觸底')
        }
    }
  }
}

在距離底部100px時成功觸發事件，但因爲100px往下的區域是符合條件的，會致使一直觸發，這不是咱們想要的。

接下來作一些處理，讓其進入後只觸發一次:

export default {
  data(){
    return {
      isReachBottom: false,
      reachBottomDistance: 100
    }
  },
  methods: {
    onScroll(e) {
        let scrollTop = e.target.scrollTop
        let scrollHeight = e.target.scrollHeight
        let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
        let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance

        if(currentHeight < scrollHeight && this.isReachBottom){
          this.isReachBottom = false
        }
        if(this.isReachBottom){
          return
        }
        if (currentHeight >= scrollHeight) {
          this.isReachBottom = true
          console.log('觸底')
        }
    }
  }
}

優化

實時去獲取位置信息稍微會損耗性能，咱們應該把不變的緩存起來，只實時獲取可變的部分

export default {
  data(){
    return {
      isReachBottom: false,
      reachBottomDistance: 100
      scrollHeight: 0,
      offsetHeight: 0,
    }
  },
  mounted(){
    // 頁面加載完成後  將高度存儲起來
    let dom = document.querySelector('.comment-area .comment-list')
    this.scrollHeight = dom.scrollHeight
    this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
  },
  methods: {
    onScroll(e) {
        let scrollTop = e.target.scrollTop
        let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance

        if(currentHeight < this.scrollHeight && this.isReachBottom){
          this.isReachBottom = false
        }
        if(this.isReachBottom){
          return
        }
        if (currentHeight >= this.scrollHeight) {
          this.isReachBottom = true
          console.log('觸底')
        }
    }
  }
}

實現到這裏就告一段落，若是你有更好的思路和值得改進的地方，歡迎交流~

- END -

 

近期

程序員都喜歡用的架構圖工具

vue+ts打造一個酷炫的星空聊天室

若此文有用，何不素質三連❤️

本文分享自微信公衆號 - Vue中文社區（vue_fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。