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如何跨组件传递Slot的实现
• vue-calendar-component 封装多日期选择组件的实例代码
• 如何实现vue的tree组件
• vue组件中节流函数的失效的原因和解决方法
• 在vue中通过render函数给子组件设置ref操作
• Antd-vue Table组件添加Click事件,实现点击某行数据教程
• html中创建并调用vue组件的几种方法汇总

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！