用Vue写backToTop指令

来源：互联网发布：淘宝退货官方寄快递编辑：程序博客网时间：2024/06/06 00:48

用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