VUE实现吸底按钮


Posted in Vue.js onMarch 04, 2021

本文实例为大家分享了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.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue实现可移动的悬浮按钮
Mar 04 #Vue.js
vue中axios封装使用的完整教程
Mar 03 #Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 #Vue.js
详解vue3中组件的非兼容变更
Mar 03 #Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
You might like
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
python访问sqlserver示例
2014/02/10 Python
python函数形参用法实例分析
2015/08/04 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
六行python代码的爱心曲线详解
2019/05/17 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python如何实现DES加密
2020/09/21 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
小学教师办公室制度
2014/02/03 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
毕业生对母校寄语
2015/02/26 职场文书
居委会工作总结2015
2015/05/18 职场文书
交通事故代理词范文
2015/05/23 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
pandas数值排序的实现实例
2021/07/25 Python