js原生实现上拉加载功能

2019_6_15

js原生实现上拉加载

主要原理是 视图窗口的可视高度，滚动条当前位置，和滚动窗口的高度直接的关系

function SelectCandidatesData（type, page, keyword） {
    // 请求数据
    return new Promise()
}
var vm = new Vue({
    data: {
        page: 1,
        title: '全部'
        morDataTxt: '上拉加载更多数据'
    },
    created(){
      this.fetchItemList()
    },
    mounted() {
      let _this = this
      window.addEventListener('scroll', this.throttle(_this.pullUp, 16))
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.throttle)
    },
async fetchItemList() {
        const d = await SelectCandidatesData(1, this.page, this.title)
        if (d.errcode == 0) {
          this.itemList = [...this.itemList, ...d.data.candidates_info]
          if(!d.data.candidates_info.length) {
            this.moreDataTxt = '暂无更多数据'
          }
        }
      },
    // 滚动条丽顶部的距离
     getScrollTop() {
        return document.documentElement.scrollTop || document.body.scrollTop
      },
    // 窗口可视区域高度
      getClientHeight() {
        return document.documentElement.clientHeight || document.body.clientHeight
      },
    // 滚动区域高度
      getScrollHeight() {
        return document.documentElement.scrollHeight || document.body.scrollHeight
      },
      pullUp() {
        let _this = this
        let scrollTop = this.getScrollTop()
        let clientHeight = this.getClientHeight()
        let scrollHeight = this.getScrollHeight()
        // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
        if (scrollTop + clientHeight >= scrollHeight) {
          this.page++
          this.throttle(_this.fetchItemList(), 30)
        }
      },
      throttle(fn, delay) {
        let lastTime = 0
        return function(){
          let nowTime = Date.now()
          if(nowTime - lastTime > delay) {
            fn.call(this)
            lastTime = nowTime
          }
        }
      }
})