您好,登錄后才能下訂單哦!
使用Vue如何實現(xiàn)一個Header漸隱漸現(xiàn)效果?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
引入到父組件Detail.vue中
header.vue
通過router-link
標簽設(shè)置to屬性
為地址,實現(xiàn)點擊返回首頁
tag標簽設(shè)為div,就有了div的屬性
<template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class="iconfont header-abs-back"></div> </router-link> <div class="header-fixed"> <div class="header"> 景點詳情 <router-link to="/"> <div class="iconfont header-fixed-back"></div> </router-link> </div> </div> </div> </template> <script> export default { name: 'DetailHeader' } </script> <style lang="scss" scoped> @import '~styles/varibles.scss'; .header-abs { position: absolute; left: 0.2rem; top: 0.2rem; width: 0.8rem; height: 0.8rem; line-height: 0.8rem; text-align: center; border-radius: 0.4rem; background: rgba(0, 0, 0, 0.8); .header-abs-back { color: #fff; font-size: 0.4rem; } } .header-fixed { position: fixed; top: 0; left: 0; right: 0; height: $HeaderHeight; line-height: $HeaderHeight; text-align: center; color: #fff; background: $bgColor; .header-fixed-back { position: absolute; top: 0; left: 0; color: #fff; width: 0.64rem; text-align: center; font-size: 0.4rem; } } </style>
調(diào)用activated鉤子函數(shù),因為我們用了keepalive,所以頁面只要一被展示activated鉤子就會執(zhí)行
下面圖的意思是綁定一個“scroll”事件,一旦它被執(zhí)行對應(yīng)的this.handleScroll方法會被執(zhí)行
addEventListener() 方法,事件監(jiān)聽
你可以使用 removeEventListener() 方法來移除事件的監(jiān)聽。
語法:
element.addEventListener(event, function, useCapture);
第一個參數(shù)是事件的類型 (如 “click” 或 “scroll”).
第二個參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。
第三個參數(shù)是個布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。
注意:不要使用 “on” 前綴。 例如,使用 “click” ,而不是使用 “onclick”。
漸隱漸現(xiàn)效果
這里用到了三元表達式,讓opacity最大值只能是1
F12審查元素可看到style被添加到div上了
<template> <div class="header"> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back"></div> </router-link> <div class="header-fixed" v-show="!showAbs" :> <div class="header"> 景點詳情 <router-link to="/"> <div class="iconfont header-fixed-back"></div> </router-link> </div> </div> </div> </template> <script> export default { name: 'DetailHeader', data() { return { showAbs: true, opacityStyle: { opacity: 0 } } }, methods: { handleScroll() { console.log('scroll') // console.log(document.documentElement.scrollTop) const top = document.documentElement.scrollTop if (top > 60) { let opacity = top / 140 // 讓 opacity 最大值只能是 1 opacity = opacity > 1 ? 1 : opacity this.opacityStyle = { opacity } this.showAbs = false } else { this.showAbs = true } } }, activated() { window.addEventListener('scroll', this.handleScroll) }, deactivated() { window.removeEventListener('scroll', this.handleScroll) } } </script> <style lang="scss" scoped> @import '~styles/varibles.scss'; .header-abs { position: absolute; left: 0.2rem; top: 0.2rem; width: 0.8rem; height: 0.8rem; line-height: 0.8rem; text-align: center; border-radius: 0.4rem; background: rgba(0, 0, 0, 0.8); .header-abs-back { color: #fff; font-size: 0.4rem; } } .header-fixed { position: fixed; top: 0; left: 0; right: 0; height: $HeaderHeight; line-height: $HeaderHeight; text-align: center; color: #fff; background: $bgColor; .header-fixed-back { position: absolute; top: 0; left: 0; color: #fff; width: 0.64rem; text-align: center; font-size: 0.4rem; } } </style>
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責聲明:本站發(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)容。