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

Posted 2023-02-25

【中文标题】Sencha Touch 2 Carousel：开始/结束页面的锁定滑动

【英文标题】：Sencha Touch 2 Carousel: Lock Swiping of Start/End Page

【发布时间】：2012-06-07 13:28:27

【问题描述】：

我希望 Carousel 在页面的开头和结尾停止滑动。 我的意思是防止结束页面滑动到右和开始页面滑动 到左侧：

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

在此先感谢您。

【问题讨论】：

查看 LockableCarousel 类：***.com/a/9365898/862474

【参考方案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”卡上向左滑动时，我不想看到白色背景。我能解释一下我想要什么吗？提前致谢。

【参考方案2】：

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