用Vue写backToTop指令

最新推荐文章于 2024-06-01 09:45:19 发布

叶听风

最新推荐文章于 2024-06-01 09:45:19 发布

阅读量2.8k

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/weixin_35022783/article/details/78496987

版权

vue-js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用Vue写backToTop指令

指令是Vue框架中非常有用，目前正在学习当中。

以下是参照教程写的返回顶部backToTop指令，具有以下功能。

点击按钮后可以返回顶部。
当滚动到一定位置后出消失与隐藏。

还有待改进的地方。

代码中有2句是重复的。
未写到一个.vue文件中，复用性不高。

以上两点努力在以后的学习中实现。
话不多说，直接上代码。

代码块

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue"></script>
  <title>Document</title>
  <style>
    body{
      height: 1500px;
      background: #ccc;
    }
    .go-top{
      width: 30px;
      height: 30px;
      line-height:30px;
      border-radius: 50%;
      background: rgb(37, 148, 133);
      position: fixed;
      right: 30px;
      bottom: 30px;
      opacity: 0;
      transition: all ease 1s;
      -webkit-transition: all ease 1s;
      text-align: center;
      color: #fff;
      cursor: pointer;
    }
    .active{
      opacity: 1;
    }
  </style>
</head>
<body>

  <div id="demo">
    <div class="test" v-scroll="showTop">
      <div @click="gotop" class="go-top" :class="goTop?'active':''">^</div>
    </div>
  </div>

  <script>

    Vue.directive('scroll',{
      bind:function(el,binding){
        window.addEventListener('scroll',()=>{          
          let fnc = binding.value;
          fnc(el);
        })
      }
    })



    var vm = new Vue({
      el: "#demo",
      data:{
        goTop: false,
        scrollTop: ""
      },
      methods:{        
        gotop: function(){          
          let speed = 10;
          let timer = setInterval(function(){            
            this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            if(this.scrollTop>0){
              this.scrollTop = (this.scrollTop - speed >0) ? (this.scrollTop - speed) : 0;
              speed += 20;
              window.scrollTo(0,this.scrollTop);
            }else{
              clearInterval(timer);
            }
          },16)
        },
        showTop: function(){          
          this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
          if(this.scrollTop>200){
            this.goTop = true;
          }else{
            this.goTop = false;
          }
        }

      }
    })

  </script>


</body>
</html>

代码不好的地方，烦请各位指点。谢谢先。

叶听风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Vue写backToTop指令

用Vue写backToTop指令指令是Vue框架中非常有用，目前正在学习当中。以下是参照教程写的返回顶部backToTop指令，具有以下功能。点击按钮后可以返回顶部。当滚动到一定位置后出消失与隐藏。还有待改进的地方。代码中有2句是重复的。未写到一个.vue文件中，复用性不高。以上两点努力在以后的学习中实现。话不多说，直接上代码。代码块<!DOCTYPE html><html lan
复制链接

扫一扫