在angular4.X里使用mCustomScrollbar滚动条插件
发布时间：2020-12-17 10:37:07 所属栏目：安全 来源：网络整理
导读：参考网上的方法 对其配置，有的时候会出现问题，可以尝试更换一下mCustomScrollbar的版本。 可以不用install在项目里，直接将所需的js和css下载下来后放在项目的静态文件夹目录下。然后在angular.json里对其引用。 如下图为必须文件： 一些扩展功能需要mouse
|
参考网上的方法 对其配置，有的时候会出现问题，可以尝试更换一下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是在指令里自己定义的一个事件，为啦实现在滚动条滚到底部请求新数据更新数据。 在组件里定义的滚动到底部触发自定义事件后调用的方法：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
