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 :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>
    

效果图： 

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

• vue实现可移动的悬浮按钮
• vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
• vue滑动吸顶及锚点定位的示例代码
• vue实现吸顶、锚点和滚动高亮按钮效果
• 实现一个 Vue 吸顶锚点组件方法
• @L_512_5@
• Vue开发实现吸顶效果的示例代码
• vue实现某元素吸顶或固定位置显示（监听滚动事件）

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！