Shulou(Shulou.com)05/31 Report--

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 & & 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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.