欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 回到顶部的小问题

程序员文章站 2023-12-31 20:20:22
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能做成一个自定义指令: 根据滚动的距离控制一个数据为true还是为false(v scroll sho ......

今天在用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;
        })
    }
})

上一篇:

下一篇: