标签：bottom ble event etop str else tor 重写 this
这篇介绍一下，写一个自己的angular2滚动监听插件
目录结构：
/scrollModule:
ztw-scroll.module.ts;
scrollBind.directive.ts;
scroll.directive.ts;
scroll.service.ts;
使用：
({
template:`
<div ztwScrollBind> //ztwScrollBind用于监听body的scroll行为，可以绑定在任何一个组件上。
<div class=‘block‘ *ngFor=‘let block of blocks‘
(scrolled)=‘scrolled($event)‘ //滚动进入时触发。
(leaved)=‘leaved($evnet)‘ //离开时触发。
ztwScrollControl>
</div>
</div>
`
})
export class component{
this.blocks=[1,2,3]
scrolled(e){
if(!e.target) return;
}
leaved(e){
}
}
ztw-scroll.module.ts:
import {NgModule} from ‘@angular/core‘;
import {ScrollDirective} from ‘./scroll.directive‘;
import {ScrollService} from ‘./scroll.service‘;
import {ScrollBindDirective} from ‘./scrollBind.directive‘;
@NgModule({
declarations:[
ScrollDirective,
ScrollBindDirective
],
exports:[
ScrollDirective,
ScrollBindDirective
],
providers:[ScrollService]
})
export class ZTWScrollModule{}
在app.module中imports它。
scroll.service.ts:
import {Injectable} from ‘@angular/core‘;
import {Subject} from ‘rxjs/Subject‘;
@Injectable()
export class ScrollService{
scrollTop:Subject<number>=new Subject();
constructor(){};
controlNodes=[]; //储存所有的scrollControl
name:string=‘bb‘;
getAbsoluteTop(node){ //获得scrollControl的绝对高度。
let top=node.offsetTop;
if(node.offsetParent) top+=this.getAbsoluteTop(node.offsetParent);
return top;
}
}
scroll.directive.ts:
监听body的滚动行为。
import {Directive} from ‘@angular/core‘;
import {ScrollService} from ‘./scroll.service‘;
@Directive({
selector:‘[ztwScrollBind]‘
})
export class ScrollDirective{
constructor(
private scrollService:ScrollService
){
window.onscroll=function(){
let topNum=document.querySelector(‘body‘).scrollTop;
let nodes=scrollService.controlNodes;
if(nodes===[])return;
nodes.forEach(node=>{ //动态重写每个scrollControl的绝对高度。因为每个scrollControl的绝对高度不一定是固定的。
let top=scrollService.getAbsoluteTop(node);
node.ztw_top=top;
node.ztw_bottom=top+node.offsetHeight;
})
scrollService.scrollTop.next(topNum);
}
}
}
scrollBind.directive.ts:
控制每个scrollControl。
import {Directive,Input,Output,EventEmitter,ElementRef} from ‘@angular/core‘;
import {ScrollService} from ‘./scroll.service‘;
@Directive({
selector:‘[ztwScrollControl]‘
})
export class ScrollBindDirective{
@Input(‘ScrollBind‘)node:string;
@Output() scrolled=new EventEmitter;
@Output() leaved=new EventEmitter;
constructor(
private el:ElementRef,
private scrollService:ScrollService
){ }
ngAfterViewInit(){
let node=this.el.nativeElement;
this.scrollService.controlNodes.push(node);
let sendOnece=true,scrolled=false;
let sendObj={target:node};
this.scrollService.scrollTop.subscribe(v=>{ //给scrollControl分配一个订阅。scroll进入时触发一次scrolled，离开时触发一次leaved。
if(!node.ztw_top) return;
if(v>node.ztw_top&&v<node.ztw_bottom){
if(!sendOnece)return ;
this.scrolled.emit(sendObj);
sendOnece=false;
scrolled=true;
}else{
if(!scrolled) return;
this.leaved.emit(sendObj);
scrolled=false;
sendOnece=true;
}
})
}
}
插件分享：
已分享至github:https://github.com/zhantewei2/angular2-module-share
里面还有一个前段时间，纯JS写的文本编辑器。供大家分享及指教。
标签：bottom ble event etop str else tor 重写 this
原文地址：http://www.cnblogs.com/ztwBlog/p/6368202.html
