2013-01-19 33 views
3

在Sencha Touch 2旋转木马的末端或开始处,用户可以将其拖到应该能够去的地方并显示白色背景(屏幕截图在这里:http://i.imgur.com/MkX0sam.png)。我试图禁用此功能,因此用户不能将拖到轮播结束/开始处。禁用Sencha Touch中的旋转木马过卷/过度支撑

我已经尝试用各种scrollable配置要做到这一点,包括一般建议来处理滚动反弹

scrollable : { 
    direction: 'horizontal', 
    directionLock: true, 
    momentumEasing: { 
    momentum: { 
     acceleration: 30, 
     friction: 0.5 
    }, 
    bounce: { 
     acceleration: 0.0001, 
     springTension: 0.9999, 
    }, 
    minVelocity: 5 
    }, 
    outOfBoundRestrictFactor: 0 
    } 

上述配置的设置,尤其是outOfBoundRestrictFactor不会停止拖动过去年底的能力,但它也阻止了拖动旋转木马中其他任何地方的能力...所以这是行不通的。我把所有其他配置搞砸了,没有任何积极影响。

不幸的是,我一直无法找到更多关于修改拖动配置。这里的任何帮助将是真棒酱。

回答

5

您需要做的是覆盖Carousel中的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); 
    } 
}); 
+0

太棒了,这个工程。谢谢! –

+0

这将禁用从列表中的最后一项开始的过度滚动,但会从其他项目中过度滚动。通过拖拽第二个项目比最后一个项目的宽度更多,仍然可以进行过度滚动。 –