Sencha touch 在Sencha Touch中禁用旋转木马过卷/透支

Sencha touch 在Sencha Touch中禁用旋转木马过卷/透支,sencha-touch,sencha-touch-2,carousel,Sencha Touch,Sencha Touch 2,Carousel,在Sencha Touch 2旋转木马的结尾或开头,用户可以将项目拖过它应该能够到达的位置,并显示白色背景(此处的屏幕截图:)。我正在尝试禁用此功能,因此用户无法拖动旋转木马的结尾/开头 我尝试用各种可滚动的配置来实现这一点,包括通常建议用于处理过度滚动的设置 scrollable : { direction: 'horizontal', directionLock: true, momentumEasing: { momentum: { accelerat

在Sencha Touch 2旋转木马的结尾或开头,用户可以将项目拖过它应该能够到达的位置,并显示白色背景(此处的屏幕截图:)。我正在尝试禁用此功能,因此用户无法拖动旋转木马的结尾/开头

我尝试用各种
可滚动的
配置来实现这一点,包括通常建议用于处理过度滚动的设置

scrollable : {
  direction: 'horizontal',
  directionLock: true,
  momentumEasing:  {
     momentum: {
       acceleration: 30,
       friction: 0.5
     },
     bounce: {
        acceleration: 0.0001,
        springTension: 0.9999,
     },
     minVelocity: 5
  },
  outOfBoundRestrictFactor: 0   
  }
上述配置,尤其是
出边界限制因子
确实会停止拖动到末端,但也会停止在旋转木马中拖动任何其他位置的能力…因此这不起作用。我把所有其他的配置都搞砸了,没有任何积极的效果


不幸的是,我还没有找到太多关于修改拖动配置的信息。这里的任何帮助都是令人惊叹的。

您需要做的是覆盖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);
    }
});
Ext.define('Ext.carousel.Custom'{
扩展:“Ext.carousel.carousel”,
onDrag:函数(e){
如果(!this.isDraging){
返回;
}
var startOffset=this.dragstartfset,
方向=this.getDirection(),
delta=方向===‘水平’?e.deltaX:e.deltaY,
lastOffset=此.offset,
flickStartTime=this.flickStartTime,
dragDirection=this.dragDirection,
now=Ext.Date.now(),
currentActiveIndex=this.getActiveIndex(),
maxIndex=this.getMaxItemIndex(),
lastDragDirection=dragDirection,
抵消;
如果((currentActiveIndex==0&&delta>0)| |(currentActiveIndex==maxIndex&&delta<0)){
δ*=0.5;
}
偏移量=STARTOFSET+增量;
如果(偏移>上次偏移){
牵引方向=1;
}
否则如果(偏移量<上次偏移量){
拖动方向=-1;
}
如果(dragDirection!==lastDragDirection | |(现在-flickStartTime)>300){
this.flickStartOffset=lastOffset;
this.flickStartTime=now;
}
this.dragDirection=dragDirection;
//现在我们有了dragDirection,我们应该使用它来检查是否有
//是要拖动到的项目
if((dragDirection==1&¤tActiveIndex==0)| |(dragDirection==1&¤tActiveIndex==maxIndex)){
返回;
}
这个.setOffset(offset);
}
});

这将禁用列表中最后一个项目的过度滚动,但禁用其他项目的过度滚动。通过拖动最后一个项目的宽度超过最后一个项目的宽度,仍然可以进行过度滚动。