当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 在angular4.X里使用mCustomScrollbar滚动条插件

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

2018年12月11日  | 移动技术网IT编程  | 我要评论

参考网上的方法

对其配置，有的时候会出现问题，可以尝试更换一下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的所有方法可以查看插件官网的说明。

https://www.cnblogs.com/ly-leo/p/5750059.html 

自定义事件说明：angular 4.x events bubbling：

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

<perfect-scrollbar style="max-height: 366px" (psyreachend)="psyreachend('getcertification')" *ngif="certifications.length>0">
　　内容
</perfect-scrollbar>

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

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网