app阅读情况下header通常在显示或者隐藏状态下切换,如果这里只是单纯介绍怎控制那就没特别大的意义了,这篇通过angular 的directive控制header的状态,用起来相当爽。。。
首先通过命令行创建 directive
2.在app.module中加入到import中
3.在app的布局界面上注入修饰器
tip:
[header]用来接收head的控件,也就是#head所处的控件上
hide.js
tip:
host:{
绑定修饰器需要监听的事件,我们把修饰器放在content中就是为了监听他的滑动事件
}
ngOninit(){
//改方法会在控件初始化时自动执行,这里首先获的header的高度,同时也需要获取content,并为他门指定transition
}
tip:
紧接着实现onContentScroll(e)方法,根据event对象的scrollTop属性判断滑动的距离,之后设置header的位置属性即可。
就这么简单,就完成了“gds”的修饰器
effect: