Sencha Touch 2 Carousel:锁定开始/结束页面的滑动

时间:2012-06-07 13:28:27

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

我希望Carousel在页面的开头和结尾停止滑动 我的意思是阻止结束页面滑动右侧开始页面刷卡< / strong>到

Carousel

是否有任何配置或其他方式来实现它?

先谢谢你。

2 个答案:

答案 0 :(得分:1)

默认情况下,ST2的carousel组件具有此配置。所以,你不需要付出额外的努力来实现这一目标。

查看Sencha网站上的this示例。当您到达最后一个项目时,它将阻止向右滑动,当您在第一个项目时,它将阻止向左滑动。

Ext.create('Ext.Carousel', {
    fullscreen: true,

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            html : 'Item 1',
            style: 'background-color: #5E99CC'
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]
});

答案 1 :(得分:1)

您可以创建自己的轮播,然后覆盖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);
    }
});

参考:= Link