7

我使用了Perfect Scrollbar，然后我开始使用 Angular 2，但我找不到类似的添加。在 Angular 2 项目中实现完美滚动条的正确方法是什么？

我遵循了这个很好的例子，但我有点迷失了如何改变ngOnInit()

jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'});

到这个=>

$(function() {
  $('#Demo').perfectScrollbar();
4

2 回答 2

6

您可以使用 vanilla js 在自定义指令中初始化完美滚动条（因为它支持它;-)），如下所示：

import Ps from 'perfect-scrollable';

@Directive({
  selector: '[ps]'
})
export class PsDirective {
  constructor(private elementRef:ElementRef) {
  }

  ngAfterViewInit() {
    Ps.initialize(this.elementRef.nativeElement);
  }
}

您可以像这样使用/应用它：

@Component({
  selector: 'app'
  template: `
    <div ps class="container">
      <div class="content"></div>
    </div>
  `,
  styles: [`
    .content {
      background-image: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg');
      width: 1280px;
      height: 720px;
    }

    .container {
      position: relative;
      margin: 0px auto;
      padding: 0px;
      width: 600px;
      height: 400px;
    }
  `],
  directives: [ PsDirective ]
})
export class App {
}

在这种方式之前必须已经配置了库（css 和 SystemJS）：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/css/perfect-scrollbar.min.css"/>

<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    map: {
      'perfect-scrollable': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/js/min/perfect-scrollbar.min.js'
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

请参阅此 plunkr：https ://plnkr.co/edit/S8DJpHFVNFioklTl1xg6?p=preview 。

于 2016-04-29T16:30:06.990 回答
0

Angular2-drag-scroll是您正在寻找的库

使用示例：

<style>
  .demo-one {
    height: 260px;
    background-color: #FFFFFF;
  }
</style>

<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
  <img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
</div>

我正在将“拖动滚动”应用于 div，因此该 div 中的所有内容都将是可拖动的并且具有属性溢出：滚动等。

将“drag-scroll-y-disabled”设置为 true 将禁用 y 轴滚动/拖动。

将“scrollbar-hidden”设置为 true 将隐藏滚动条。

滚动

Github 页面：https ://github.com/bfwg/angular2-drag-scroll

演示站点：https ://bfwg.github.io/angular2-drag-scroll/

于 2017-02-07T17:54:12.237 回答