How to realize scrolling pagination loading of pure front-end table by vue
Today Xiaobian to share with you how to achieve pure front-end table scrolling paging loading of the relevant knowledge points, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.
Realize the effect
Realization process
Loading data data () {return {visibleLoading: false,}}, mounted () {/ / ref points to the corresponding div, global snooping on window is not recommended, which will affect the scrolling this.$refs.container.addEventListener ('scroll', this.handleScroll) of child div;}, beforeUnmount () {this.$refs.container.removeEventListener (' scroll', this.handleScroll) }, methods: {/ / Roller listening handleScroll () {let listAllHeight = document.documentElement.scrollTop | | document.body.scrollTop + document.documentElement.scrollHeight | | document.body.scrollHeight; let containerHeight = document.querySelector ('# container'). ScrollHeight; / / 46 + 62 + 75 is the remaining distance between the table and the top of the page, which is related to personal layout let fieldHeight = document.querySelector ('# left-field'). ScrollHeight + 46 + 62 + 75 If ((fieldHeight > = containerHeight & & this.pageHeight! = = fieldHeight) | | (containerHeight > fieldHeight & & this.pageHeight! = = containerHeight)) {this.visibleLoading = true;} setTimeout (() = > {if (listAllHeight = this.pageHeight & & this.pageHeight)
< containerHeight) { this.pageHeight = this.pageHeight + 750; } if (this.pageHeight >ContainerHeight & & containerHeight > fieldHeight) {this.pageHeight = containerHeight;} if (this.pageHeight > fieldHeight & & fieldHeight > = containerHeight) {this.pageHeight = fieldHeight;} this.visibleLoading = false;};},}. Loading-bottom {position: absolute; left: 255px; bottom: 0; height: 30px; padding: 5px 0; background-color: # d3dae6; width: calc Text-align: center; font-size: 14px; font-weight: 500; border-radius: 2px;} these are all the contents of the article "how to achieve pure front-end table scrolling pagination loading by vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
