查看: 2372|回复: 0

[HTML代码] vue 回到顶部的小问题

发表于 2018-1-2 08:00:00

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

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

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

问题:

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

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

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

  1. <BackTop v-back-top v-scroll-show:300='isBackShow' :isShow='isBackShow'></BackTop>
  2. data(){
  3. return {
  4. isBackShow:{value:false}
  5. }
  6. },
  7. js:
  8. import Vue from 'vue'
  9. Vue.directive('scroll-show',{
  10. inserted(el,binding){
  11. let scope = binding.arg || '200'
  12. window.addEventListener("scroll",function(e){
  13. if(this.scrollY>Number(binding.arg)){
  14. binding.value.value=true
  15. }else{
  16. binding.value.value=false
  17. }
  18. })
  19. }
  20. })
  21. Vue.directive('back-top',{
  22. inserted(el,binding){
  23. let e = binding.arg || 'click'
  24. el.addEventListener(e,function(){
  25. document.documentElement.scrollTop = document.body.scrollTop =0;
  26. })
  27. }
  28. })
复制代码


回复

使用道具 举报