加载状态
1 <div v-if='has_log == 0'> 2 <load-more tip="上拉加载下一页" :show-loading="false" background-color="#fbf9fe"></load-more> 3 </div> 4 <div v-if='has_log == 1'> 5 <load-more tip="正在加载" :show-loading="true"></load-more> 6 </div> 7 <div v-if='has_log == 2'> 8 <load-more tip="没有更多数据了" :show-loading="false" background-color="#fbf9fe"></load-more>
js 部分 整体思路是 上拉的时候 给后台传 "page" 加载一次page 自增1 (如需动态路由后台会返回相关字段 在路由后面动态配置)
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 } }) } } } }