亲宝软件园·资讯

展开

vue backtop组件 vue backtop组件的实现完整代码

五那几诺火库洛,火库洛!! 人气:0
想了解vue backtop组件的实现完整代码的相关内容吗,五那几诺火库洛,火库洛!!在本文为您仔细讲解vue backtop组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,backtop组件,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>

加载全部内容

相关教程
猜你喜欢
用户评论