本文實例為大家分享了VUE實現吸底按鈕的具體代碼，供大家參考，具體內容如下

<template> <div id='test'> <ul class='list-box'> <li v-for='(item, key) in 50' :key='key'> {{ item }} </li> </ul> <transition name='fade'> <p : 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>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。