angular2中实现百度百科导航栏的效果

这是在百度百科中的效果


Paste_Image.png

下面我们开始在ng2中实现
1.用一套数据绑定两个区域:主页面和导航栏

Paste_Image.png

html代码:

<main class="teaching_plan_unit">
<!--导航栏-->
  <section class="navigate">
    <p class="top"><span></span></p>
    <p class="text" (click)="onTab(item)" [ngClass]="{active: activeId==item.id}" *ngFor="let item of _atomicTeachPlan.oTeachPlanModuleList">{{item.moduleTitle}}</p>
    <p class="end"><span></span></p>
  </section>
  <section appScroll (onTabChange)="onTabChange($event)">
<!--主页面-->
    <examination-question-module *ngFor="let item of _atomicTeachPlan?.oTeachPlanModuleList" [id]="'module_'+item.id" [teachPlanModule]="item" [state]="_state"></examination-question-module>
  </section>
</main>

component:

import { Component, OnInit, Input, ElementRef } from '@angular/core';

@Component({
    selector: 'teaching-plan-unit',
    styleUrls: ['teaching-plan.component.css'],
    templateUrl: 'teaching-plan-unit.component.html'
})
export class TeachingPlanUnitComponent implements OnInit {
    _state: string;     // preview预览;edit编辑
    _atomicTeachPlan: any;
    activeId: string = '1';
    @Input()
    set state(state) {
        this._state = state;
    }
    @Input()
    set atomicTeachPlan(atomicTeachPlan) {
        this._atomicTeachPlan = atomicTeachPlan;
    }
    constructor(private el: ElementRef) { }

    ngOnInit() { }

    onTab(module) {
        let id = 'module_' + module.id;
        this.setActive(module.id);
        let moduleDom = this.el.nativeElement.children[0].lastElementChild.children;
        for (let i = 0; i < moduleDom.length; i++) {
            if (moduleDom[i].id === id) {
                document.body.scrollTop = moduleDom[i].offsetTop;
            }
        }
    }

    setActive(index: string) {
        this.activeId = index;
    }

    onTabChange(top) {
        let moduleDom = this.el.nativeElement.children[0].lastElementChild.children;
        for (let i = 1; i < moduleDom.length; i++) {
            if (moduleDom[i].offsetTop > top && moduleDom[i-1].offsetTop <= top) {
                let index = moduleDom[i-1].id.split('module_')[1];
                this.setActive(index);
            }
        }
    }
}

directive

import { Directive, HostListener, ElementRef, Input, EventEmitter, Output } from '@angular/core';

@Directive({
    selector: '[appScroll]'
})
export class ScrollDirective {
    @Output() onTabChange: EventEmitter<number> = new EventEmitter<number>();

    constructor(private el: ElementRef) {}

    @HostListener('mousewheel', ['$event']) onMouseWheelChrome() {
        this.onTabChange.emit(document.body.scrollTop);
    }
}

分两个部分:
1.点击导航栏定位到相应的模块
(1)点击设置导航栏激活状态,获取相应模块的id值(或者data-top获取滚动距离)
(2)ElementRef定位到相应的模块,操作Dom,将滚动条移动到相应的位置去

2.监听鼠标滚动判断导航栏激活状态
(1)指令中HostListener获取滚动事件
(2)传回滚动条距离
(3)导航栏根据滚动距离判断激活状态

关于ng2监听鼠标事件,可参考:
http://www.tuicool.com/articles/eii2yaB

import { Directive, Output, HostListener, EventEmitter } from '@angular/core';
@Directive({ selector: '[mouseWheel]' })export class MouseWheelDirective { 
  @Output() mouseWheelUp = new EventEmitter(); 
  @Output() mouseWheelDown = new EventEmitter(); 
  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) { this.mouseWheelFunc(event); } 
  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) { this.mouseWheelFunc(event); }
  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) { this.mouseWheelFunc(event); }
  mouseWheelFunc(event: any) {
    var event = window.event || event; // old IE support var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); 
    if(delta > 0) { this.mouseWheelUp.emit(event); } 
    else if(delta < 0) { this.mouseWheelDown.emit(event); } // for IE event.
    returnValue = false; // for Chrome and Firefox if(event.preventDefault) { event.preventDefault(); } }}

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 168,006评论 26 707
  • 你是否见过有些人面对压力情绪时能泰然处之,稳如泰山,而有的人侧表现的唉声叹气、暴跳如雷? 你是否认为有钱就一定幸福...
    牛万里阅读 1,638评论 4 0
  • 当周围的有人忙忙碌碌时,不要受其影响,因为慌乱后的行为会散发出不可估量的愚蠢气味 有安逸生活时,就好好享受此时的安...
    好海子阅读 257评论 0 0
  • 从1988年太阳神创业开始,主打品牌就是太阳神生物健口服液和猴头菇口服液,这两只产品创造了太阳神的辉煌。可是在随后...
    与梦阅读 531评论 0 0
  • 漫长的飞机旅途让林媛曼有些困意,她头靠着窗听着他的家人谈笑风生。这是林媛曼第一次搬家,从灵旧搬到墨城,灵旧是个...
    浮烟酿阅读 71评论 0 0