js原生がアップロード機能を実現します.

11563 ワード

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
          }
        }
      }
})