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里直接使用申明的的形 ...
随机推荐
- [HTML] SCSS 备忘录
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- Spring MVC前后端数据交互总结
控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...
- django操作memcached
1.首先需要在settings.py中配置好缓存 CACHES = { 'default': { 'BACKEND': 'django.core.cache.backends.memcached.Me ...
- android屏幕密度规律及dp px转换
px和dp(sp) 之间转化公式: 1 乘以(dp转px)或者除以(px转dp) scal缩放因子,在上浮0.5f /** * 密度转换像素 * */ public static int dip2p ...
- Web API 2 对于 Content-Length 要求严格
最近在做一个工具,里面有一个发起http请求的操作,虽然工具不是用.NET写的,但是测试用服务器软件是.NET写的.在这里选择了ASP.NET MVC和Web API 2. 首先预定义Student与 ...
- java工具类-日期工具类
1.获得时间戳 为了统一其他语言的如php和unix系统获取的时间戳是10位长度的,精确到秒. java时间戳长度是13位,精确到毫秒 我们获取时间戳需要相应处理. //获取当前时间戳,除以1000, ...
- Jmeter报错之jmeter.gui.action.ActionRouter: Error processing gui.action.Start@1b7c473a java.lang.ArrayIndexOutOfBoundsException
一个使用了很久的Jmeter脚本,运行时Jmeter的UI界面上点击绿色按钮后,完全无反应,只有log报错,如下: 2017/06/28 14:29:23 ERROR - jmeter.gui.act ...
- 牛X的规则引擎urule2
牛X的规则引擎urule2 教程:http://wiki.bsdn.org/pages/viewpage.action?pageId=75071499
- Entity Framework 6.x - Code First 默认创建数据库的位置
在集成DbContext的派生类中的构造函数里,如果没有指定配置文件中的数据库连接字符串的name,默认就是: Data Source=(localdb)\MSSQLLocalDB;Initial C ...
- Java转义emoji等特殊符号
写在前面 网上找了很多转emoji等方法,大多有两种方法 更改数据库编码格式为utf8mb4 过滤字符串中的emoji 都不是很优雅 更改数据库编码,势必影响其他数据库 过滤emoj效率比较低 处理E ...