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; }) } })