当前位置: 萬仟网 > IT编程>脚本编程>vue.js > vue backtop组件的实现完整代码

vue backtop组件的实现完整代码

2021年04月07日  | 萬仟网IT编程  | 我要评论
效果:代码:<template> <div class="back-top"> <div > <img src="imgsrc" class="line

效果:

在这里插入图片描述

代码:

<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组件内容请搜索萬仟网以前的文章或继续浏览下面的相关文章希望大家以后多多支持萬仟网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com