VUE实现吸底按钮

本文实例为大家分享了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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。