自定义指令
<div class="detailtitle" v-title>
<i class="iconfont icon-xiaoyuhao"></i>
<span>{{动态获取数据}}</span>
</div>
<style scoped lang="scss">
.detail {
margin-bottom: 0.7rem;
.detailtitle{
height: .44rem;
line-height: .44rem;
width: 100%;
position: fixed;
background: #fff;
left: 0;
top: 0;
text-align: center;
transition: .3s all linear;
i{
position: absolute;
left:.04rem;
height:.2rem;
background:red;
border-radius: 50%;
}
}
//引入Vue
import Vue from 'vue'
Vue.directive('title',{
//插入到dom之后的钩子函数inserted
inserted(el,binding){
//binding.value = binding.value || 50
//初始化的时候为隐藏状态
el.style.display = 'none'
//屏幕滚动之后需要作出判断
window.onscroll = function (){
//获取屏幕滚动的距离,并且定义一个屏幕滚动的距离为50,以50为基准,作出判断
let sTop = document.documentElement.scrollTop || document.body.scrollTop //兼容
if(sTop > 50){
el.style.display = 'block'
}else{
el.style.display = 'none'
}
}
},
unbind(el){//指令与dom元素解绑的时候,需要清空绑定的屏幕滚动距离,否则在任何一个界面都会触发window.onscroll
window.onscroll = null
}
})
但是需要注意的是,如果想要给自定义指令添加动画效果transition在display中切换没有效果,可改成透明度
el.style.opacity = '0'