在Sencha Touch中禁用轮播过度滚动/ overdrag

时间:2013-01-19 03:52:57

标签: sencha-touch sencha-touch-2 carousel

在Sencha Touch 2轮播结束时或开始时,用户可以将项目拖到应该去的位置并显示白色背景(此处为屏幕截图:http://i.imgur.com/MkX0sam.png)。我正在尝试禁用此功能,因此用户无法拖过旋转木马的结束/开头。

我尝试使用各种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确实会停止拖动结束的能力,但它也会停止在旋转木马中的任何其他位置拖动的能力......所以这不起作用。我已经搞砸了所有其他配置,没有任何积极的影响。

不幸的是,我无法在修改拖动配置方面找到太多。这里的任何帮助都会很棒。

1 个答案:

答案 0 :(得分: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);
    }
});