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

Most people do not understand the knowledge of this article "how to add scrolling load through native vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to add scrolling load through native vue" article.

Add more scrolling loads in vue, because it is a single page, so you need to destroy the scrolls when you jump out of the page, or there will be confusion. We create scrolls in mounted and destroy scrolls in destroyed.

Mounted () {window.addEventListener ('scroll', this.handleScroll)}, destroyed () {window.removeEventListener (' scroll', this.handleScroll)}

Define a function that makes the sum of the distance from the top of the scroll bar and the height of the visual area equal to the total height of the scroll bar when scrolling to the bottom. If the list length is 0 after loading, you should stop loading, or it will not load all the time.

HandleScroll () {/ / variable scrollTop is the distance from the top of the scroll bar var scrollTop = document.documentElement.scrollTop | | document.body.scrollTop; / / variable windowHeight is the height of the visible area var windowHeight = document.documentElement.clientHeight | | document.body.clientHeight; / / variable scrollHeight is the total height of the scroll bar var scrollHeight = document.documentElement.scrollHeight | | document.body.scrollHeight / / condition if from the scroll bar to the bottom (scrollTop+windowHeight==scrollHeight & & this.list.length! = = 0) {this.loadMore () / / loaded list data}} the above is about the article "how to add scrolling load more functions through native vue". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it. Please follow 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.