vue backtop组件的实现完整代码
2021-04-08 04:06
369 查看
效果:
代码:
<template> <div class="back-top"> <div > <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" :style="{display: (firstShow? 'block': 'none')}" @click="backTop"> </div> </div> </template> <script> export default { name: "backTop", data(){ return { firstShow: false,//初始化隐藏组件 isHide: false, scrollFLag: true, } }, created() { document.addEventListener('scroll', () => { let scroll = document.documentElement.scrollTop if(scroll > 200){ this.isHide = false this.firstShow = true }else{ this.isHide = true } }) }, methods: { backTop(){ if(this.scrollFLag){ this.scrollFLag = false //屏幕高度 let scroll = document.documentElement.scrollTop let scrollTimer = setInterval(()=> { scroll -= 50 document.documentElement.scrollTop = Math.max(scroll, 0) if( scroll <= 0){ clearInterval(scrollTimer) } }, 10) this.scrollFLag = true } }, }, } </script> <style scoped lang="scss"> .back-top{ position: fixed; top: 0; right: 10vw; width: 20px; height: 500px; z-index: 200; .line{ width: 12vw; height: 100%; z-index: 20; cursor: pointer; opacity: 0.8; transform: translateY(-100%); &:hover{ opacity: 1; } } .isShow{ animation: back-top-move 0.5s forwards linear, back-top-yurayura 2s 0.6s forwards linear infinite; } .isHide{ animation: back-top-hide 0.5s forwards linear; } } @keyframes back-top-hide { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes back-top-move { to { transform: translateY(0); } } @keyframes back-top-yurayura { 0%{transform-origin: top center;transform: rotate(0)} 25%{transform-origin: top center;transform: rotate(2deg)} 75%{transform-origin: top center;transform: rotate(-2deg)} 100%{transform-origin: top center;transform: rotate(0)} } </style>
到此这篇关于vue backtop组件的实现完整代码的文章就介绍到这了,更多相关vue backtop组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:相关文章推荐
- Vue实现一个返回顶部backToTop组件
- vue项目中将element-ui table表格写成组件的实现代码
- Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件
- vue组件之Alert的实现代码
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- Vue全局分页组件的实现代码
- vue移动端轻量级的轮播组件实现代码
- vue弹窗组件的实现示例代码
- 如何用 120 行代码,实现交互完整的拖拽上传组件?
- Vue组件内部实现一个双向数据绑定的实例代码
- Vue中的异步组件函数实现代码
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- vue 自定义提示框(Toast)组件的实现代码
- VUE实现自身整体组件销毁的示例代码
- vue中组件的过渡动画及实现代码
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- 使用Vue父子组件通信实现todolist的功能示例代码
- vue.js开发实现全局调用的MessageBox组件实例代码
- Vue实现内部组件轮播切换效果的示例代码
- Vue组件实例间的直接访问实现代码