您好,登錄后才能下訂單哦!
如何在vue中使用backtop組件?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
代碼:
<template> <div class="back-top"> <div > <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" : @click="backTop"> </div> </div> </template> <script> export default { name: "backTop", data(){ return { firstShow: false,//初始化隱藏組件 isHide: false, scrollFLag: true, } }, created() { document.addEventListener('scroll', () => { let scroll = document.documentElement.scrollTop if(scroll > 200){ this.isHide = false this.firstShow = true }else{ this.isHide = true } }) }, methods: { backTop(){ if(this.scrollFLag){ this.scrollFLag = false //屏幕高度 let scroll = document.documentElement.scrollTop let scrollTimer = setInterval(()=> { scroll -= 50 document.documentElement.scrollTop = Math.max(scroll, 0) if( scroll <= 0){ clearInterval(scrollTimer) } }, 10) this.scrollFLag = true } }, }, } </script> <style scoped lang="scss"> .back-top{ position: fixed; top: 0; right: 10vw; width: 20px; height: 500px; z-index: 200; .line{ width: 12vw; height: 100%; z-index: 20; cursor: pointer; opacity: 0.8; transform: translateY(-100%); &:hover{ opacity: 1; } } .isShow{ animation: back-top-move 0.5s forwards linear, back-top-yurayura 2s 0.6s forwards linear infinite; } .isHide{ animation: back-top-hide 0.5s forwards linear; } } @keyframes back-top-hide { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes back-top-move { to { transform: translateY(0); } } @keyframes back-top-yurayura { 0%{transform-origin: top center;transform: rotate(0)} 25%{transform-origin: top center;transform: rotate(2deg)} 75%{transform-origin: top center;transform: rotate(-2deg)} 100%{transform-origin: top center;transform: rotate(0)} } </style>
看完上述內(nèi)容,你們掌握如何在vue中使用backtop組件的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。