欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論