Shulou(Shulou.com)06/02 Report--

This article mainly introduces "vue how to achieve the top top effect through v-show". In the daily operation, I believe that many people have doubts about how to achieve the vue back to the top top effect through v-show. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "how to achieve the top top effect through v-show". Next, please follow the editor to study!

Html

Top

Css

.totop {width: 50px; height: 50px; line-height: 50px; border-radius: 25px; background-color: white; position: fixed; bottom: 75px; right: 10px; text-align: center;}

Data

Data () {return {toTopShow: false, srcoll: 0,}}

Monitor event

Watch: {srcoll () {if (this.srcoll > 400) {this.toTopShow = true;} else {this.toTopShow = false;},}

Load event

Mounted () {window.addEventListener ("scroll", this.srcollShow);}

Methods:

Methods: {srcollShow () {this.srcoll = window.pageYOffset | | document.documentElement.scrollTop | | document.body.scrollTop;}, toTop () {this.toTopSpeed = setInterval (()) = > {document.documentElement.scrollTop = document.documentElement.scrollTop-20 document.documentElement.scrollTop / delayed scrolling if (this.srcoll < 10) {clearInterval (this.toTopSpeed) by changing the number }, 1);},} at this point, the study on "how to get back to the top top effect by vue through v-show" is over. I hope to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.