feat(module: carousel): feat carousel support dragging (#350)

NG-ZORRO · Mar 20, 2019 · 5dc49a4 · 5dc49a4
1 parent a3b9014
commit 5dc49a4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/components/carousel/carousel.component.ts b/components/carousel/carousel.component.ts
@@ -40,7 +40,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   private _transition: string = '';
   private _spaceWidth: number = 0;
   private _observer: MutationObserver;
-  private _shouldDragging: boolean = true;
+  private _dragging: boolean = true;
   private _currentSelectedIndex: number = 0;
   private _selectedIndex: number = 0;
 
@@ -97,7 +97,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   @HostListener('touchstart', ['$event'])
   panstart(event) {
     event.stopPropagation();
-    if (!this.dragging) {
+    if (!this._dragging) {
       return;
     }
     this.stopTimer();
@@ -114,7 +114,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   @HostListener('touchmove', ['$event'])
   panmove(event) {
     event.stopPropagation();
-    if (!this.dragging || !this._isMouseDown) {
+    if (!this._dragging || !this._isMouseDown) {
       return;
     }
     const { direction } = this.swipeDirection(
@@ -149,7 +149,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   @HostListener('touchend', ['$event'])
   panend(event) {
     event.stopPropagation();
-    if (!this.dragging || !this._isMouseDown || !this.touchObject.length || this.touchObject.length === undefined) {
+    if (!this._dragging || !this._isMouseDown || !this.touchObject.length || this.touchObject.length === undefined) {
       this._isMouseDown = false;
       return;
     }
@@ -186,8 +186,8 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   carouselInit(items) {
     this.infinite = this.infinite || true;
     this._nodeArr = items['_results'];
-    this._shouldDragging = this._nodeArr.length > 1;
-    this.dragging = this.dragging ? this._shouldDragging : this.dragging;
+    const shouldDragging = this._nodeArr.length > 1;
+    this._dragging = (this.dragging && shouldDragging) ? true : false;
     if (this._nodeArr.length > 1) {
       this._lastIndex = this._nodeArr.length - 1;
       setTimeout(() => {

diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md
@@ -17,4 +17,5 @@ Properties | Descrition | Type | Default
 | afterChange  | callback to be called after a slide is changed | (current: number): void | <span> </span> |
 | dotStyle  | style of dots | Object | <span> </span> |
 | dotActiveStyle  | style of active dot | Object  | <span> </span> |
-| swipeSpeed | configure the swipe sensitivity | number | 12 |
+| swipeSpeed | configure the swipe sensitivity | number | 12 |
+| dragging | whether to slide with drag | Boolean |（children more than one is true， or is false）|
diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md
@@ -20,4 +20,5 @@ subtitle: 走马灯
 | afterChange  | 切换面板后的回调函数 | (current: number): void  | 无 |
 | dotStyle  | 指示点样式 | Object | 无 |
 | dotActiveStyle  | 当前激活的指示点样式 | Object | 无 |
-| swipeSpeed | 滑动灵敏度 |  number | 12 |
+| swipeSpeed | 滑动灵敏度 |  number | 12 |
+| dragging | 是否允许滑动切换 | Boolean |（子元素大于1时为true， 否则为false）|