Angular 实现Bootstrap ScrollSpy控件
Bootstap是基于JQuery开发,Angular中不支持Bootstrap相关事件逻辑。本文基于Typecript开发了一个Angular可用的ScrollSpy控件。Scrollspy控件主要实现了左侧导航以及右侧正文之间的联动和切换。所以,
此组件主要解决两个问题:
(1)点击左侧导航列表,右侧正文能够跟随切换的焦点定位到具体的段落,即添加导航点击事件
(2)右侧正文滚动时,左侧导航列表可以根据正文滚动的位置自动定位到,该段落所属的目录索引上。即添加正文滚动事件。
1. 代码结构
1.组件代码
滚动监听指令:
监听滚动事件,并且获取当前滚动焦点的元素值(element)然后切换当前导航树位置(postion),触发positionchange事件函数。
//scrollspy.direct.ts
import { Directive, Injectable, Input, EventEmitter, Output, ElementRef, HostListener } from '@angular/core'; @Directive({
selector: '[NgScrollSpy]'
})
export class NgScrollSpyDirective { @Output() public positonChange = new EventEmitter<string>();
private currentposition: string;
private Tags = ['DIV']; constructor(private _el: ElementRef) {} @HostListener('scroll', ['$event']) //监听正文滚动事件
onScroll(event: any) {
let position: string;
const children = this._el.nativeElement.children;
const scrollTop = event.target.scrollTop;
const parentOffset = event.target.offsetTop;
for (let i = 0; i < children.length; i++) {
const element = children[i];
if (this.Tags.some(tag => tag === element.tagName)) {
if ((element.offsetTop - parentOffset) <= scrollTop) {
position = element.id;
}
}
}
if (position !== this.currentposition) {
this.currentposition = position;
this.positonChange.emit(this.currentposition);
}
} }
通过scrollTo(position :string)函数获取左侧导航树点击位置,并操作DOM定位到对应位置。
通过onPositionChange(position: string)函数获取右侧正文的滚动位置。
//ngscrollspy.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-ngscrollspy',
templateUrl: './ngscrollspy.component.html',
styleUrls: ['./ngscrollspy.component.css']
})
export class NgscrollspyComponent implements OnInit { constructor() { } ngOnInit() {
} currentPostion = 'Phase1'; // 正文滚动事件 设置当前滚动位置,供NgScrollSpyDirective使用
onPositionChange(position: string) {
this.currentPostion = position;
} // 导航点击事件 查找目录节点别切换到节点
scrollTo(position :string) {
document.querySelector('#' + position)
.scrollIntoView();
}
}
html
//ngscrollspy.component.html
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<h2>导航</h2>
<div (click)="scrollTo('phase1')">段落1
<ng-container *ngIf="currentPostion==='phase1'">++</ng-container>
</div>
<div (click)="scrollTo('phase2')">段落2
<ng-container *ngIf="currentPostion==='phase2'">++</ng-container>
</div>
<div (click)="scrollTo('phase3')">段落3
<ng-container *ngIf="currentPostion==='phase3'">++</ng-container>
</div>
<div (click)="scrollTo('phase4')">段落4
<ng-container *ngIf="currentPostion==='phase4'">++</ng-container>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div id="phases" NgScrollSpy (positonChange)="onPositionChange($event)" style="height:150px;overflow-y: scroll;">
<div id="phase1">
<h2 style="margin:0">段落 1</h2>
<PhaseText></PhaseText>
</div>
<div id="phase2">
<h1>段落 2</h1>
<PhaseText></PhaseText>
</div>
<div id="phase3">
<h1>段落 3</h1>
<PhaseText></PhaseText>
</div>
<div id="phase4">
<h1>段落 4</h1>
<PhaseText></PhaseText>
</div>
</div>
</div>
</div>
</div>
详细代码可以访问github仓库
https://github.com/OshimaYong/AngularDemo
Angular 实现Bootstrap ScrollSpy控件的更多相关文章
- 支持Angular 2的表格控件
前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...
- Angular 2的表格控件
Angular 2的表格控件 前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular ...
- angularjs 整合bootstrap 时间控件
一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...
- bootstrap日期控件(双日期、清空等问题解决)
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...
- Bootstrap 时间控件datetimepicker与timepicker
一.datetimepicker 首先,我们看看点击选择时间的时候的展示页面吧 年 月 ...
- js插件---Bootstrap 树控件
js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
- bootstrap 有些控件需要调用锚点,会与angular 路由 冲突
最简单的方法 就是 在 #号前加/, 但有人说 在服务器上回失效,也不知道是什么原理.慎用 最靠谱的方法 就 是 使用bootstrap中的js控制控件, 比如轮播图的上一页 下一页,就可以在 ang ...
- [转]通过AngularJS directive对bootstrap日期控件的的简单包装
本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...
- [整理]通过AngularJS directive对bootstrap日期控件的的简单包装
最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...
随机推荐
- Liferay7 BPM门户开发之1:Liferay7开发环境准备
liferay sdk下载 \IDE下载 \ Tomcat 安装细节不在此赘述 网上有很多. 只讲核心关键坑点 进入2016年,从Liferay6.2.5 ga6版本开始,到7.0 ga3,在ivy环 ...
- tkinter之Frame
tkinter的Frame即容器,在容器内部好像不能再嵌套一个Frame.
- Django url分发器
视图: 视图一般都写在app的views.py中.并且视图的第一个参数永远都是request(一个HttpRequest)对象.这个对象存储了请求过来的所有信息,包括携带的参数以及一些头部信息等.在视 ...
- (转)linux用户态和内核态理解
原文:https://blog.csdn.net/buptapple/article/details/21454167 Linux探秘之用户态与内核态-----------https://www.cn ...
- Anaconda 科学计算环境与包的管理
相信大多数 python 的初学者们都曾为开发环境问题折腾了很久,包管理和 python 不同版本的问题,特别是 window 环境安装个 scrapy 各种报错 ,使用 Anaconda 可以很好的 ...
- TDD并不是看上去的那么美
原文:http://coolshell.cn/articles/3649.html 春节前的一篇那些炒作过度的技术和概念中对敏捷和中国ThoughtWorks的微辞引发了很多争议,也惊动了中国Thou ...
- Java中函数的重载和重写
重载 重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况.比如下面这段代码 class Test{ public void a(){ System.out.println ...
- 30-hadoop-hbase-安装squirrel工具
如果您的工作要求您在一天之中连接许多不同的数据库 (oracle.DB2.mysql.postgresql.Sql Server等等),或者你经常需要在多个不同种类的数据库之间进行数导入导出.那么SQ ...
- Java队列——Disruptor 的使用
.什么是 Disruptor 从功能上来看,Disruptor 是实现了“队列”的功能,而且是一个有界队列.那么它的应用场景自然就是“生产者-消费者”模型的应用场合了. 可以拿 JDK 的 Bloc ...
- Nginx缓存配置之手动清除缓存
访问我的博客 前言 前文介绍了利用 nginx 的 nginx_ngx_cache_purge 模块来实现缓存功能,并设置了缓存时间为一天. 但是如果前端修改了页面,比如首页,由于 Nginx 缓存的 ...