【问题标题】:Disable carousel overscroll/overdrag in Sencha Touch在 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 确实停止了拖过末端的能力,但它也停止了在轮播中拖动其他任何地方的能力......所以这不起作用。我已经搞砸了所有其他配置,但没有任何积极影响。

不幸的是,我找不到太多关于修改拖动配置的信息。这里的任何帮助都会很棒。

【问题讨论】:

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


    【解决方案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);
        }
    });
    

    【讨论】:

    • 这将禁止从列表中的最后一项开始过度滚动,但从其他项目开始。仍然可以通过拖动倒数第二项超过最后一项的宽度来进行过度滚动。
    猜你喜欢
    • 2020-06-24
    • 2012-09-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多