VUE实现吸底按钮
2021-03-05 04:06
681 查看
本文实例为大家分享了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实现点击按钮,滑出面板(二)完结版
- Vue实现点击按钮复制文本内容的例子
- vue.js 实现点击按钮动态添加li的方法
- Vue.js 实现表单数据参数传递,以及不同独立按钮之间的参数传递
- Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制
- vue+element UI实现表格中动态添加开关控制按钮
- vue实现动态按钮功能
- 用vue简单的实现点击按钮切换背景颜色
- Vue实现按钮旋转和移动位置的实例代码
- Vue自定义组件实现按钮权限功能
- electron-vue中点击按钮,实现打开程序目录里面的某个文件
- 基于vue实现一个神奇的动态按钮效果
- vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
- vue中使用element组件的Layout布局和Button按钮实现分页
- Vue+elementUI项目实现自定义上传图片并在页面显示,通过点击按钮后发送给后端
- vue和element框架搭配实现导航条跳转,点击按钮跳转页面导航条也跟着变换
- vue-router--路由传参结合请求数据(页面底部按钮跳转功能实现参考)
- vue 点击按钮实现动态挂载子组件
- vue移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由,返回到自己指定的路由