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

Posted 2023-02-25

【中文标题】在 Sencha Touch 中禁用轮播过度滚动/过度拖动

【英文标题】：Disable carousel overscroll/overdrag in Sencha Touch

【发布时间】：2013-01-19 03:52:57

【问题描述】：

在 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】：

您需要做的是覆盖 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);
    
);

【讨论】：

这将禁止从列表中的最后一项开始过度滚动，但从其他项目开始。仍然可以通过拖动倒数第二项超过最后一项的宽度来进行过度滚动。