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

Today, the editor will share with you the relevant knowledge points about how vue can achieve the effect of scrolling tab following switching. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

First, we need to monitor the scrolling of the current page.

Mounted () {/ / record the dom array for each content pair this.arrDom = document.getElementsByClassName ("item-content"); window.addEventListener ('scroll', this.handleScroll);}, destroyed () {window.removeEventListener (' scroll', this.handleScroll);}

Our tab list can be customized in data:

TabList: [{id:1, name:' details'}, {id:2, name:' comments'}, {id:3, name:' News'}, {id:4, name:' about'}, {id:5, name:' related'}]

Then we correspond to the rendering tab list and the corresponding content in dom, which can be directly associated with a field in the item of tablist, or written separately.

{{item.name}} 11111111 22222 33333 44444 555555

And then there's our js part.

HandleScroll () {let scrollTop = window.pageYOffset | | document.documentElement.scrollTop | | document.body.scrollTop; this.headerFixed = scrollTop > this.offsetTop; for (let I = 0; I

80) {if (this.arrdom [I]. OffsetTop-scrollTop80) {this.active = iTun1}} else {this.active = this.arrDom.length;}, this is all the content of the article "how does vue achieve the effect of scrolling arrdom to follow the switch effect". 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.