vue backtop组件的实现完整代码


Posted in Vue.js onApril 07, 2021

效果:

vue backtop组件的实现完整代码

代码:

<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.js 相关文章推荐
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
You might like
php变量范围介绍
2012/10/15 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python中有趣在__call__函数
2015/06/21 Python
python3实现随机数
2018/06/25 Python
flask框架路由常用定义方式总结
2019/07/23 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
社区文明倡议书
2015/04/28 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
队列队形口号
2015/12/25 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android