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>

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