用Vue写backToTop指令

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

叶听风

2889人浏览 · 2017-11-10 10:20:08

叶听风 · 2017-11-10 10:20:08 发布

用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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^