vue滚动，自定义指令组件，滚动控制显隐

方法一
要实现滚动事件的话，我们想到的方案就是在mounted函数里面进行scroll方法的监听，在beforeDestroyed里面对于scroll移除。

mounted(){
     window.onscroll = ()=>{
            if(document.documentElement.scrollTop > 40){
                console.log("显示show")
            }else{
                console.log("隐藏hide")
            }
        }
    },
    //因为是spa单页应该，滚动是全局的，任何组件一旦绑定了，那么所有组件都有有滚动事件，顾必须在组件销毁的时候需要将绑定的scroll方法及时清空。
    beforeDestroy(){ 
        window.onscroll = null   
    },

方法二
因为上述方案的话是直接操作window相关的dom操作，我们还是建议采用自定义指令的方式实现此效果。

Vue.directive("title",{
    //插入到dom之后的钩子函数
    inserted(el,binding){
        el.style.display = "none" //开始detailtile这个dom节点是隐藏的
        window.onscroll = ()=>{
            if((document.body.scrollTop || document.documentElement.scrollTop)>binding.value){
                el.style.display = "block"
            }else{
                el.style.display = "none"
            }
        }
    },
    //指令的解绑的钩子函数
    unbind(){
        window.onscroll = null
    }
})

<div class="detailtitle" v-title="100">
    <i class="iconfont icon-back"></i>
    <span>少年的你</span>
</div>

v-title=“{}”也可是对象，传自己需要的值