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实现购物小球抛物线的方法实例
Nov 22 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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 加密与解密的斗争
2009/04/17 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP学习记录之数组函数
2018/06/01 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python登录系统界面实现详解
2019/06/25 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
英文商务邀请信
2014/01/22 职场文书
心理健康课教学反思
2014/02/13 职场文书
教代会闭幕词
2015/01/28 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Python中的pprint模块
2021/11/27 Python