对某个节点什么时候显示和隐藏使用自定义指令:(吸顶也可以用自定义指令)
在mounted(事件监听的工作)中监听一个window.onscroll事件,当doucument.doumentElement.scrollTop>50显示,<50隐藏,离开组件时,destroyed内,window.οnscrοll=null 清空。
用自定义指令做:(详情页)
vue中的自定义指令就是封装底层dom逻辑,指令可以传参
根据指令隐藏显示,先封装一个组件,将内容fixed在顶部,自定义封装一个scroll指令,
在当前页面中定义一个指令,用Vue.directive('scroll',{inserted(el,binding){console.log(el)}})
el是当前绑定的事件的原生dom节点,binding获取传参值,通过inserted()回调函数创建事件监听,开始时使
el.style.display='none'
再用window.οnscrοll=()=>{
if((document.documentElement.scrollTop||document.body.scrollTop)>binding.value){
el.style.display='block'
}else{
el.style.display='none'
}
},
//销毁执行()(通过销毁清除事件监听)
unbind(){
window.οnscrοll=null;
}