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

问题描述

在Sencha Touch 2传送带的结尾或开头，用户可以将其拖动到应该能够通过的位置并显示白色背景（此处为屏幕截图：）。我正在尝试禁用此功能，因此用户无法将其拖到轮播的结尾/开头。

At the end or beginning of a Sencha Touch 2 carousel, a user can drag the item past where it should be able to go and display the white background (screenshot here: http://i.imgur.com/MkX0sam.png). I'm trying to disable this functionality, so a user can't drag past the end/beginning of a carousel.

我已经尝试使用各种 scrollable 配置来做到这一点，包括通常建议用于应对过度滚动的设置

I've attempted to do this with the various scrollable configurations, including the setup that is typically suggested for dealing with overscrolling

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

上述配置，尤其是 outOfBoundRestrictFactor 确实停止了拖动到最后的能力，但也停止了在旋转木马中拖动其他任何地方的功能...因此不起作用。我搞砸了所有其他配置，没有任何积极效果。

The above configuration, especially outOfBoundRestrictFactor does stop the ability to drag past the end, but it also stops the ability to drag anywhere else in a carousel either...so that doesn't work. I've screwed around with all of the other configurations to no positive effect.

不幸的是，我在修改拖动配置方面找不到很多东西。

Unfortunately, I haven't been able to find much on modifying the configurations of dragging. Any help here would be awesomesauce.

推荐答案

您需要做的是覆盖 onDrag 功能。这是检测用户拖动方向的逻辑，您可以在其中检查它是第一个项目还是最后一个项目。

What you need to do is override the onDrag functionality in Carousel. This is where the logic is to detect which direction the user is dragging, and where you can check if it is the first or last item.

这里有一个类正是您想要的。您感兴趣的代码就在函数底部。其余的只是从 Ext.carousel.Carousel 中获取。

Here is a class that does exactly what you want. The code you are interested in is right at the bottom of the function. The rest is simply taken from 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);
    }
});

这篇关于在Sencha Touch中禁用轮播过度滚动/过度拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！