Angular5 自定义scrollbar样式之 ngx-perfect-scollbar
版本
- angular 5.0
- ngx-perfect-scrollbar ^5.3.5
为什么不用 ngx-perfect-scrollbar 最新的版本 v7 呢?
因为它报错啊!!! 每次init的时候,就报一个Object() is not a function
。 根据GitHub上热心网友的建议,就downgrade了。
详见:https://github.com/zefoy/ngx-perfect-scrollbar/issues/189
安装
npm 安装没啥好说的
npm install --save ngx-perfect-scrollbar@^5.0.0
使用
1. 导入module
// app.module.ts
import { PerfectScrollbarModule, PerfectScrollbarConfigInterface, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
wheelPropagation: true
};
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
...
],
imports: [
...,
PerfectScrollbarModule
],
exports: [
],
providers: [
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
}
]
})
export class AppModule {}
Providing the global configuration is optional and when used you should only provide the configuration in your root module.
提供全局配置是可选的,但是如果你需要使用,那么只需要在应用的root module中配置。
2. 在模板中使用
API 提供了两种使用方式,一种是 Component
使用方式,一种是 Derective
使用方式。我在项目中用的后者。
<ul *ngIf="nodeList.length" class="indented mTop scroll" [style.max-height.px]="treeContentHeight" [perfectScrollbar]="config">
<li class="no_line" *ngFor="let node of nodeList"></li>
</ul>
import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
public config: PerfectScrollbarConfigInterface = {};
@ViewChild(PerfectScrollbarDirective) directiveRef?: PerfectScrollbarDirective;
3. 导入CSS
// styles.scss
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
效果:
遇到的问题
上中下结构中,只让 content部分有滚动条,但是路由跳转后,滚动条的高度没有重新计算。
解决方案:
// home.component.html
<div class="container">
<div class="header">
<app-header></app-header>
</div>
<div class="content" [perfectScrollbar]="config">
<router-outlet></router-outlet>
</div>
<div class="footer">
<app-footer></app-footer>
</div>
</div>
在路由跳转后,需要调用update()
更新scrollbar的size 和 position
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router} from '@angular/router';
import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
public config: PerfectScrollbarConfigInterface = {};
@ViewChild(PerfectScrollbarDirective) directiveRef?: PerfectScrollbarDirective;
constructor(public _router: Router) { }
ngOnInit() {
this._router.events.subscribe((event) => {
// update the scrollbar
this.directiveRef.update();
});
}
}
Angular5 自定义scrollbar样式之 ngx-perfect-scollbar的更多相关文章
- Angular5 自定义scrollbar样式之 ngx-malihu-scrollbar
简介 此插件是 Malihu jQuery Scrollbar 为了在 Angular2+ 环境下使用,封装的一个ts的版本.提供directive和service. 从安装量来看,它比不过 perf ...
- Android必知必会-自定义Scrollbar样式
如果移动端访问不佳,请使用–>GitHub版 背景 设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义scrollbar
Chrome ::-webkit-scrollbar 整体部分 ::-webkit-scrollbar-track 轨道 ::-webkit-scrollbar-track-piece 内层轨道 :: ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- scrollbar样式设置
转载:https://segmentfault.com/a/1190000012800450?utm_source=tag-newest author:specialCoder 一 前言 在CSS 中 ...
- 自定义滚动条样式-transition无效
问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...
- CSS3:scrollbar样式设置
CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条 或者 overflow-x:scroll --- 只有x方向出现滚动 ...
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...
随机推荐
- 题解 [SDOI2010] 大陆争霸
题面 解析 这题似乎不是那么难啊 首先,显而易见, 如果要摧毁一个城市,必须要满足两个条件: 机器人摧毁了保护它的城市. 机器人到达了这个城市. 而这两个条件可以同时进行(毕竟有无数机器人) 那么显然 ...
- 【Android-自定义控件】 漂亮的Toast
修改Toast属性,美化Toast //创建一个Toast Toast toast=new Toast(getApplicationContext()); //创建Toast中的文字 TextView ...
- 【Python之路】特别篇--Django瀑布流实现
瀑布流 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinteres ...
- JS上传大文件的解决方案
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- BZOJ 4152: [AMPPZ2014]The Captain Dijkstra+贪心
Code: #include <queue> #include <cstdio> #include <cstring> #include <algorithm ...
- 2019ICPC陕西邀请赛复盘
题目链接:The 2019 ACM-ICPC China Shannxi Provincial Programming Contest A:签到,按花费时间从小到大排个序 #include<cs ...
- Centos7安装Redis5.0.3
1.切换目录 cd tmp 2.下载 wget http://download.redis.io/releases/redis-5.0.3.tar.gz 3.解压,删除压缩包 tar xzf redi ...
- kubernetes将集群外部流量引入集群内
一.service:pod是有生命周期的,我们想给客户一个固定的访问端点,在客户端与服务端之间启动一个固定的中间层,依赖于kubernetes的一个附件CoreDns.kubernetes有三类网路地 ...
- 理清gcc、libc、libstdc++的关系
当你在linux下写C/C++代码的时候,是不是会遇到许多编译链接的问题? 时不时报个glibc,gcc,g++等相关的错误? 很多时候都无从下手,而且比较混乱. 这也是编译链接过程中经常出现的问题. ...
- 在docker容器中python3.5环境下使用DIGITS训练caffe模型
********* 此处使用的基础镜像为 nvcr.io/nvidia/digits:18.06,镜像大小为6.04GB,可从nvidia官方pull此镜像: 容器配置: CUDA:9.0 CUDNN ...