当前位置： 移动技术网 > IT编程>网页制作>Html5 > vue 回到顶部的小问题

vue 回到顶部的小问题

2018年01月04日  | 移动技术网IT编程  | 我要评论

今天在用vue项目中，实现回到顶部功能的时候，我写了一个backTop组件，接下来需要通过监听window.scroll事件来控制这个组件显示隐藏

因为可能会有其他的组件会用到这样的逻辑，所以将此功能做成一个自定义指令：

根据滚动的距离控制一个数据为true还是为false（v-scroll-show）

问题：

唯一需要注意的是，在指令的钩子函数中我们可以访问到el，也就是使用指令的标签，但是我们不能直接更改value（指令的值所代表的数据）

所以我们使用引用类型来进行地址的传递来解决这个问题

接下来有写了一个v-back-top指令，就是将回到顶部功能做成一个指令，哪个组件或者dom需要使用到回到顶部，就加上这个指令就可以，设置不同的参数来控制在不同的情况下触发

<BackTop v-back-top v-scroll-show:300='isBackShow' :isShow='isBackShow'></BackTop>

data(){
    return {
        isBackShow:{value:false}
    }
 },
              

js:

import Vue from 'vue'

Vue.directive('scroll-show',{
    inserted(el,binding){
        let scope = binding.arg || '200'
        window.addEventListener("scroll",function(e){
            if(this.scrollY>Number(binding.arg)){
                binding.value.value=true
            }else{
                binding.value.value=false
            }
        })
        
    }
})

Vue.directive('back-top',{
    inserted(el,binding){
        let e = binding.arg || 'click'
        el.addEventListener(e,function(){
            document.documentElement.scrollTop = document.body.scrollTop =0;
        })
    }
})

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网