vue 上拉加载更多数据 / 分页

 加载状态

<div v-if='has_log == 0'>
      <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more>
    </div>
    <div v-if='has_log == 1'>
      <load-more tip="正在加载" :show-loading="true"></load-more>
    </div>
    <div v-if='has_log == 2'>
       <load-more tip="没有更多数据了" :show-loading="false" background-color="#fbf9fe"></load-more>
    </div>

js

 

export default {
  name: '',
  data () {
    return {
      list: [],
      now_item: '',
      current_index: 0,
      list_param: {page: 1},
      no_data: false,
      has_log: 0
    }
  },
  components: {
    XInput
  },
  created () {
    this.get('/api/index/index', this.list_param).then((data) => {
      this.list = data.data.data
      this.list_param.page += 1
    })
    window.addEventListener('scroll', this.onScroll)
  },
  methods: {
    onScroll () {
      this.has_log = 1
      let innerHeight = document.querySelector('#app').clientHeight
      let outerHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop
      // console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop)
      // console.log(outerHeight + scrollTop - 30)
      // console.log(innerHeight)
      if (outerHeight + scrollTop === innerHeight + 57) {
        if (this.no_data === true) {
          this.has_log = 2
          return false
        }
        this.get('/api/index/index', this.list_param).then((data) => {
          if (data.data.data.length > 0) {
            this.list = [...this.list, ...data.data.data]
            this.list_param.page = this.list_param.page + 1
            this.has_log = 0
          } else {
            this.has_log = 2
            this.no_data = true
          }
        })
      }
    }
  }
}