VUE實(shí)現(xiàn)吸底按鈕
更新時(shí)間：2021年03月04日 08:50:38 作者：前端楊小白
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)吸底按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了VUE實(shí)現(xiàn)吸底按鈕的具體代碼，供大家參考，具體內(nèi)容如下
<template>
<div id="test">
<ul class="list-box">
<li v-for="(item, key) in 50" :key="key">
{{ item }}
</li>
</ul>
<transition name="fade">
<p :class="['go', { isFixed: headerFixed }]" v-if="headerFixed">
吸底按鈕
</p>
</transition>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
headerFixed: false,
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const scrollTop =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.headerFixed = scrollTop > 50
},
},
}
</script>
<style lang="scss" scoped="scoped">
#test {
.list-box {
padding-bottom: 50px;
}
.go {
background: pink;
text-align: center;
line-height: 50px;
width: 100%;
}
.isFixed {
position: fixed;
bottom: 0;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.8s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 0.8s;
}
}
</style>
效果圖：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果
移動(dòng)端頁面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下2019-05-05
如果data是一個(gè)函數(shù)的話,這樣每復(fù)用一次組件,就會(huì)返回一份新的data,下面這篇文章主要給大家介紹了關(guān)于簡單理解Vue的data為啥只能是函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊思路詳解
這篇文章主要介紹了Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊,實(shí)現(xiàn)思路大概是通過加一個(gè)本地緩存的時(shí)間戳，通過時(shí)間戳計(jì)算指定時(shí)間內(nèi)不能點(diǎn)擊按鈕，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2023-12-12
Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑
這篇文章主要介紹了Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue Cli與BootStrap結(jié)合實(shí)現(xiàn)表格分頁功能
這篇文章主要介紹了Vue Cli與BootStrap結(jié)合實(shí)現(xiàn)表格分頁功能,需要的朋友可以參考下2017-08-08
Vue-router的使用和出現(xiàn)空白頁,路由對(duì)象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對(duì)象屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 原生實(shí)現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識(shí)點(diǎn)vue點(diǎn)擊菜單以外區(qū)域，隱藏菜單操作，通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過安裝@vitejs/plugin-vue-jsx展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家介紹了Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來解決跨域的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02