angular2注册滚动事件

1、ts文件

import { Component, OnInit, Injectable, Input, Output, EventEmitter } from '@angular/core';

import { Http, Headers } from '@angular/http';

import { Observable } from 'rxjs/Rx';

import { AlertService } from 'ng-jhipster';

import { Principal } from '../'; // 分页设置，权限验证等

import { API_URL } from '../../app.constants';

import { TreeModule, TreeNode } from 'primeng/primeng';

import { RadioButtonModule } from 'primeng/primeng';

 

@Component({

selector: 'rv-seg-query',

styles: [`

.ipt-search{

display: inline-block;

position: relative;

}

.ipt-search .btn-search{

position: absolute;

top: 5px;

right: 10px;

cursor: pointer;

color: gray;

}

`],

templateUrl: './rvSegQuery.component.html'

})

export class RvSegQueryComponent implements OnInit {

private resourceUrl = `${API_URL}/api/wrRvSeg`;

 

// 树的筛选条件:1-按行政区划，2-按河流

rvSegType: number;

treeNodes: TreeNode[];

@Input() selectedNode: TreeNode;

query: any = {};

loading: boolean = true;

titleStr: string = '';

allSelectedNode: any[] = [];

hiddenAddv: boolean = true;

hiddenRvSeg: boolean = false;

// 父节点code需要传进来

@Input() parentCode: string;

@Output() onNodeSelect = new EventEmitter();

 

//所有树数据

treeList: any[];

 

//第几条

pageIndex: number = 0;

//总条数

totalRecords: number = 0;

//总页数

totalPage: number = 0;

//每页30条

itemsPerPage: number = 30;

 

nowScrollTop: number = 0;//当前滚动的离顶部的距离

 

constructor(

private http: Http,

private alertService: AlertService //错误管理

) { }

 

/*注册滚动事件*/

registerScrollEvent() {

this.nowScrollTop = 0;

let treeDiv = document.getElementsByClassName('ui-tree-container');

// if (treeDiv.addEventListener) {

// "abort" | "activate" | "beforeactivate" | "beforecopy" | "beforecut" | "beforedeactivate"

// | "beforepaste" | "blur" | "canplay" | "canplaythrough" | "change" | "click" | "contextmenu"

// | "copy" | "cuechange" | "cut" | "dblclick" | "deactivate" | "drag" | "dragend" | "dragenter"

// | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended"

// | "error" | "focus" | "input" | "invalid" | "keydown" | "keypress" | "keyup" | "load"

// | "loadeddata" | "loadedmetadata" | "loadstart" | "mousedown" | "mouseenter" | "mouseleave"

// | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "mousewheel" | "MSContentZoom"

// | "MSManipulationStateChanged" | "paste" | "pause" | "play" | "playing"

// | "progress" | "ratechange" | "reset" | "scroll" | "seeked" | "seeking"

// | "select" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate"

// | "volumechange" | "waiting" | "ariarequest" | "command" | "gotpointercapture"

// | "lostpointercapture" | "MSGestureChange" | "MSGestureDoubleTap" | "MSGestureEnd"

// | "MSGestureHold" | "MSGestureStart" | "MSGestureTap" | "MSGotPointerCapture"

// | "MSInertiaStart" | "MSLostPointerCapture" | "MSPointerCancel" | "MSPointerDown"

// | "MSPointerEnter" | "MSPointerLeave" | "MSPointerMove" | "MSPointerOut"

// | "MSPointerOver" | "MSPointerUp" | "touchcancel" | "touchend" | "touchmove"

// | "touchstart" | "webkitfullscreenchange" | "webkitfullscreenerror" | "pointercancel"

// | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout"

// | "pointerover" | "pointerup" | "wheel"

if (treeDiv.length > 0 && treeDiv[0].addEventListener) {

treeDiv[0].addEventListener('scroll', (event) => {

this.scrollFunc(event);

});

}

}

 

/**

* 滚动回调方法

* 判断滚轮向上或向下在浏览器中也要考虑兼容性，

* 现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，

* 其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，

* detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。

*/

scrollFunc(e) {

e = e || window.event;

if (e.wheelDelta) {//IE/Opera/Chrome

// alert(e.wheelDelta);

if (e.wheelDelta == -120) {

this.nextScoll(e);

}

} else if (e.detail) {//Firefox

// alert(e.detail);

if (e.detail == -3) {

this.nextScoll(e);

}

} else if (e.target) {//滚动条滚动事件

let scrollTop = e.target.scrollTop;

if (scrollTop > this.nowScrollTop) {//向下滚

console.log('向下');

this.nextScoll({ wheelDelta: -120 });

} else if (scrollTop < this.nowScrollTop) { //像上滚

console.log('向上');

}

setTimeout(() => {

this.nowScrollTop = scrollTop;

}, 0);

}

}

 

ngOnInit() {

// setTimeout(()=>{

// this.registerScrollEvent();

// },200);

// 默认按行政区划进行查询

this.rvSegType = 0;

// 将传入进来的parentCode赋值给查询条件

this.query.parentCode = this.parentCode;

this.loadTree();

}

 

/**

* radioBox选择事件

*/

rvSegTypeClick(data) {

this.pageIndex = 0;

this.treeList = [];

this.totalPage = 0;

this.totalRecords = 0;

this.rvSegType = data.index;

// console.log(this.selectedNode);

if (this.rvSegType == 0) {

this.hiddenAddv = true;

this.hiddenRvSeg = false;

this.query.parentCode = this.parentCode;

} else {

if (this.selectedNode && this.selectedNode != null) {

this.query.parentCode = this.selectedNode.data.value;

}

this.hiddenAddv = false;

this.hiddenRvSeg = true;

//this.rvSegType = 1切换到河流树时候添加滚动条滚动事件

setTimeout(() => {

this.registerScrollEvent();

}, 200);

}

this.loadTree();

}

 

search() {

this.pageIndex = 0;

this.treeList = [];

this.totalPage = 0;

this.totalRecords = 0;

this.loadTree();

}

 

/**

* 根据查询条件加载列表

*/

loadTree() {

//加载树之前先清空

this.treeNodes = [];

this.loading = true;

let body = this.query;

let headers = {

headers: new Headers({

})

};

 

let url: string = 'addvTreeQuery';

//判断选择的筛选条件

if (this.rvSegType == 1) {

//选择的是河流

url = 'rvTreeQuery';

}

this.http.post(`${this.resourceUrl}/${url}`, body, headers)

.subscribe(

(res) => this.onSuccess(res.json(), res.headers),

(res) => this.onError(res.json())

);

}

 

clickTree() {

this.emitData();

}

 

onSuccess(data, headers) {

this.loading = false;

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);

return;

}

//选择的是河流

if (this.rvSegType == 1) {

if (data.treeList && data.treeList.length > this.itemsPerPage) {

this.treeList = data.treeList;

//总条数

this.totalRecords = data.treeList.length;

//总页数

this.totalPage = this.totalRecords > this.itemsPerPage ? (this.totalRecords % this.itemsPerPage > 0 ? (this.parseInt(this.totalRecords / this.itemsPerPage) + 1) : (this.totalRecords / this.itemsPerPage)) : 1;

this.treeNodes = this.treeList.slice(this.pageIndex, this.pageIndex + this.itemsPerPage);

this.pageIndex += this.itemsPerPage;

} else {

this.treeNodes = data.treeList;

}

}

else {

this.treeNodes = data.treeList;

}

this.selectedNode = data.treeList[0];

this.emitData();

}

 

nextScoll(event) {

let scrollLoad: boolean = false;

if (event.wheelDelta) {//IE/Opera/Chrome

if (event.wheelDelta == -120) {

scrollLoad = true;

}

} else if (event.detail) {//Firefox

if (event.detail == 3) {

scrollLoad = true;

}

}

if (scrollLoad && this.rvSegType == 1 && this.treeList.length > 0) {

if (this.pageIndex > this.totalRecords) {

if (this.pageIndex - this.itemsPerPage < this.totalRecords) {

let treeListTemp: any[] = this.treeList.slice(this.pageIndex - this.itemsPerPage, this.pageIndex);

this.pageIndex += this.itemsPerPage;

treeListTemp.forEach(element => {

this.treeNodes.push(element);

});

} else {

return;

}

} else {

if (this.pageIndex + this.itemsPerPage < this.totalRecords) {

let treeListTemp: any[] = this.treeList.slice(this.pageIndex, this.pageIndex + this.itemsPerPage);

this.pageIndex += this.itemsPerPage;

treeListTemp.forEach(element => {

this.treeNodes.push(element);

});

} else {

let treeListTemp: any[] = this.treeList.slice(this.pageIndex, this.totalPage);

this.pageIndex += this.itemsPerPage;

treeListTemp.forEach(element => {

this.treeNodes.push(element);

});

}

}

 

}

}

 

parseInt(e) {

return Number.parseInt(e + '');

}

 

onError(error) {

this.loading = false;

this.alertService.error(error.error, error.message, null);

}

 

getTitle(treeNode: TreeNode, title?: string) {

// if(title) {

let isPush: boolean = true;

this.allSelectedNode.forEach(element => {

if (element.data.value == treeNode.data.value) {

isPush = false;

}

});

if (isPush) {

this.allSelectedNode.push(treeNode);

}

// }

let titleStr: string = title ? title + '>' + treeNode.label : treeNode.label;

if (treeNode.parent) {

if (this.allSelectedNode.length > 0) {

isPush = true;

this.allSelectedNode.forEach(element => {

if (element.data.value == treeNode.parent.data.value) {

isPush = false;

}

});

if (isPush) {

this.allSelectedNode.push(treeNode.parent);

}

}

titleStr = titleStr + '>' + treeNode.parent.label

if (treeNode.parent.parent) {

titleStr = this.getTitle(treeNode.parent.parent, titleStr);

}

}

return titleStr;

}

 

fanxiang(titleStr: string) {

let titleStrNew: string = '';

if (titleStr != null) {

let titles: string[] = titleStr.split('>');

for (let i = titles.length - 1; i >= 0; i--) {

if (i == titles.length - 1) {

titleStrNew = titles[i];

} else {

titleStrNew = titleStrNew + '>' + titles[i];

}

}

}

return titleStrNew;

}

 

/**

* 根据不同的选中级别返回不同的数据

*/

private emitData() {

// 判断选中的级别，根据不同的级别返回不同的数据

// 选中的是河段

// console.log(this.selectedNode) ;

this.allSelectedNode = [];

this.titleStr = this.getTitle(this.selectedNode);

this.titleStr = this.fanxiang(this.titleStr);

let result: any = {};

result.titleStr = this.titleStr;

if (this.allSelectedNode.length > 0) {

let temp: any[] = [];

for (let i = this.allSelectedNode.length - 1; i >= 0; i--) {

temp.push(this.allSelectedNode[i]);

}

this.allSelectedNode = temp;

// console.log(this.allSelectedNode);

}

result.allSelectedNode = this.allSelectedNode;

if (this.selectedNode.data.rvSegIdPath != null) {

result.type = '3';

result.rvSegIdPath = this.selectedNode.data.rvSegIdPath;

result.addvcdPath = this.selectedNode.data.addvcdPath;

}

else {

// 选中的是行政区划

if (this.rvSegType == 0) {

result.type = '1';

result.addvcdPath = this.selectedNode.data.addvcdPath;

}

// 选中的是河流选项

else {

result.type = '2';

result.addvcdPath = `/${this.parentCode}`;

result.rvCd = this.selectedNode.data.value;

}

}

this.onNodeSelect.emit(result);

}

}

 

2.页面

 

<div class="data-table-wrap">

<div class="data-table-search">

<!--搜索-->

<div class="left">

<form class="form-inline" (ngSubmit)="search()">

<div class="form-group ipt-search">

<input type="text" class="form-control" name="searchName" [(ngModel)]="query.searchName">

<!--<i class="fa fa-search" (click)="search()"></i>-->

<span class="btn-search" (click)="search()"><i class="fa fa-search"></i></span>

</div>

</form>

</div>

<div class="right">

{{titleStr}}

</div>

</div>

 

<div class="tab">

<div id="tree-div" (mousewheel)="nextScoll($event)" (DOMMouseScroll)="nextScoll($event)">

<p-tabView (onChange)="rvSegTypeClick($event)">

<p-tabPanel header="按行政区划" [selected]="true">

<div *ngIf="hiddenAddv">

<p-tree class="areaTree" [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="clickTree()"></p-tree>

</div>

</p-tabPanel>

<p-tabPanel header="按河流">

<div *ngIf="hiddenRvSeg">

<p-tree class="areaTree" [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="clickTree()"></p-tree>

</div>

</p-tabPanel>

</p-tabView>

</div>

 

</div>

 

</div>