本文實例講述了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     }    })   }  } }}

希望本文所述對大家vue.js程序設計有所幫助。