Vue implementation pull-up more data / paging function example

This example tells the pull-up load of VUE implementation to load more data / paging functions. Share to everyone for reference, specifically:

  
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.client.Height 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}}}}}}}}}}}}}

It is desirable to this article. JS program is helpful.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment