Sencha Touch 2輪播：鎖定開始/結束的滑動頁面

Question

我希望輪播在頁面的開始和結束處停止滑動。
我的意思是，防止末頁面刷卡到權和開始頁面刷卡到左：

是否有任何配置或一些其他的方式來實現它？

先謝謝您。

Answer 1

默認情況下，ST2的carousel組件具有此配置。所以，你不需要額外的努力來實現這一點。

看看來自Sencha網站的this例子。當你到達最後一個項目時，它會阻止向右滑動，當你在第一個項目時，它會阻止向左滑動。

Ext.create('Ext.Carousel', { 
    fullscreen: true, 

    defaults: { 
     styleHtmlContent: true 
    }, 

    items: [ 
     { 
      html : 'Item 1', 
      style: 'background-color: #5E99CC' 
     }, 
     { 
      html : 'Item 2', 
      style: 'background-color: #759E60' 
     }, 
     { 
      html : 'Item 3' 
     } 
    ] 
}); 

Answer 2

您可以創建自己的旋轉木馬，然後重寫事件ondrag當以下是代碼的形式Ext.carousel.Carousel

Ext.define('Ext.carousel.Custom', { 
    extend: 'Ext.carousel.Carousel', 

    onDrag: function(e) { 
     if (!this.isDragging) { 
      return; 
     } 

     var startOffset = this.dragStartOffset, 
      direction = this.getDirection(), 
      delta = direction === 'horizontal' ? e.deltaX : e.deltaY, 
      lastOffset = this.offset, 
      flickStartTime = this.flickStartTime, 
      dragDirection = this.dragDirection, 
      now = Ext.Date.now(), 
      currentActiveIndex = this.getActiveIndex(), 
      maxIndex = this.getMaxItemIndex(), 
      lastDragDirection = dragDirection, 
      offset; 

     if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) { 
      delta *= 0.5; 
     } 

     offset = startOffset + delta; 

     if (offset > lastOffset) { 
      dragDirection = 1; 
     } 
     else if (offset < lastOffset) { 
      dragDirection = -1; 
     } 

     if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) { 
      this.flickStartOffset = lastOffset; 
      this.flickStartTime = now; 
     } 

     this.dragDirection = dragDirection; 

     // now that we have the dragDirection, we should use that to check if there 
     // is an item to drag to 
     if ((dragDirection == 1 && currentActiveIndex == 0) || (dragDirection == -1 && currentActiveIndex == maxIndex)) { 
      return; 
     } 

     this.setOffset(offset); 
    } 
}); 

參考：= Link