在angular4.X里使用mCustomScrollbar滚动条插件

参考网上的方法

对其配置,有的时候会出现问题,可以尝试更换一下mCustomScrollbar的版本。

可以不用install在项目里,直接将所需的js和css下载下来后放在项目的静态文件夹目录下。然后在angular.json里对其引用。

如下图为必须文件:

一些扩展功能需要mousewheel.js。

然后在angular.json里引用:

插件是基于jquery的,所以需要先引用jquery。

这样基本的就处理好了,去将其自定义为指令就可以在项目里随处使用啦。

以下为定义指令文件代码:

import {Directive,ElementRef,OnInit,Output,EventEmitter} from '@angular/core' declare 'perfect-scrollbar''class': 'mCustomScrollbar'= .el == let scrollAxis = 'y' (.el.nativeElement.getAttribute('data-scroll') === 'X'= 'x''100%''light'(){   (.mcs.topPct >= 99) { { this.psYReachEnd.emit(); }

其中使用@Output和EventEmitter自定义事件,然后在滚动条插件的配置里,配置好当滚动到底部时通过emit()去触发这个自定义的事件。插件的callbacks的所有方法可以查看插件官网的说明。

以下为html使用指令时的代码:

这里的psYReachEnd是在指令里自己定义的一个事件,为啦实现在滚动条滚到底部请求新数据更新数据。

在组件里定义的滚动到底部触发自定义事件后调用的方法:

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...