在angular4.X里使用mCustomScrollbar滚动条插件
时间:2018-12-11
本文章向大家介绍在angular4.X里使用mCustomScrollbar滚动条插件,主要包括在angular4.X里使用mCustomScrollbar滚动条插件相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
对其配置,有的时候会出现问题,可以尝试更换一下mCustomScrollbar的版本。
可以不用install在项目里,直接将所需的js和css下载下来后放在项目的静态文件夹目录下。然后在angular.json里对其引用。
如下图为必须文件:
一些扩展功能需要mousewheel.js。
然后在angular.json里引用:
插件是基于jquery的,所以需要先引用jquery。
这样基本的就处理好了,去将其自定义为指令就可以在项目里随处使用啦。
以下为定义指令文件代码:
import {Directive, ElementRef, OnInit, Output, EventEmitter} from '@angular/core'; // import * as $ from 'jquery'; declare var $: any; @Directive({ selector: 'perfect-scrollbar', host: {'class': 'mCustomScrollbar'} }) export class ScrollbarComponent implements OnInit { @Output() psYReachEnd = new EventEmitter(); el: ElementRef; constructor(el: ElementRef) { this.el = el; } ngOnInit() { const psYReachEnd = this.psYReachEnd; // console.log(this.el); // console.log($('.mCustomScrollbar')); let scrollAxis = 'y'; if (this.el.nativeElement.getAttribute('data-scroll') === 'X') { scrollAxis = 'x'; } $(this.el.nativeElement).mCustomScrollbar({ autoHideScrollbar: true, setHeight: '100%', theme: 'light', axis: scrollAxis, callbacks: { whileScrolling: function(){ // 只要滚动条滚动,这个函数就会执行 if (this.mcs.topPct >= 99) { // 这表示当滚动条滚动到这个div的90%(当然这个值是可变的)的时候调用下面的代码, psYReachEnd.emit(); } } /*onTotalScroll: () => { this.psYReachEnd.emit(); }*/ } }); } }
其中使用@Output和EventEmitter自定义事件,然后在滚动条插件的配置里,配置好当滚动到底部时通过emit()去触发这个自定义的事件。插件的callbacks的所有方法可以查看插件官网的说明。http://manos.malihu.gr/jquery-custom-content-scroller/#callbacks-section
https://www.cnblogs.com/LY-leo/p/5750059.html
自定义事件说明:Angular 4.x Events Bubbling:https://segmentfault.com/a/1190000009149495
以下为html使用指令时的代码:
<perfect-scrollbar style="max-height: 366px" (psYReachEnd)="psYReachEnd('getCertification')" *ngIf="Certifications.length>0">
内容 </perfect-scrollbar>
这里的psYReachEnd是在指令里自己定义的一个事件,为啦实现在滚动条滚到底部请求新数据更新数据。
在组件里定义的滚动到底部触发自定义事件后调用的方法:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker Swarm群集配置实战——第二战
- Python 基础(五):序列
- OpenCV黑魔法之隐身衣 | 附源码
- SQL 统计用户留存
- 常用的前端JQ插件
- 面向对象编程(设计模式)需要遵循的 6 个基本原则
- SAP CRM Application Extension Tool的Custom Behavior
- Python 基础(四):字符串
- 使用Faster-RCNN进行指定GPU训练(续)
- SAP CDS view自学教程之十:SAP CDS view扩展性(Extensibility)实现原理
- 使用Faster-RCNN进行指定GPU训练
- Faster RCNN 环境配置
- SAP cross distribution chain status在Fiori应用中的draft handling
- 构建复杂应用的神器,FBroadcast
- Python 基础(三):我是一个数字