禁用轮播中的拖动

Posted 2023-02-26

【中文标题】禁用轮播中的拖动

【英文标题】：Disable dragging in Carousel

【发布时间】：2011-11-27 02:28:23

【问题描述】：

是否可以禁用拖动以在轮播面板之间切换？ 我只想使用指标。

【参考方案1】：

只是为 Sencha Touch 2.0 的人们扔了这个。上述解决方案不适用于 Sencha Touch 2.0，但有一个非常简单的解决方法。

Ext.define('Ext.LockableCarousel', 
    extend: 'Ext.Carousel',
    id: 'WelcomeCarousel',
    initialize: function () 
       this.onDragOrig = this.onDrag;
       this.onDrag = function (e)  if(!this.locked)this.onDragOrig(e); 
    ,
    locked: false,
    lock: function ()  this.locked = true; ,
    unlock: function ()  this.locked = false; 
);

这将完全像一个轮播，除了现在你可以调用 .lock 和 .unlock 。所以你可以这样做：

Ext.Viewport.add(Ext.create('Ext.LockableCarousel',  
     id: 'LockableCarousel',
     fullscreen: true,
     hidden: false,
     items: [
        
           html : 'Item 1',
           style: 'background-color: #5E99CC'
        ,
        
           html : '<a href="#" onclick="Ext.getCmp(\'LockableCarousel\').lock();">Lock</a><br /><a href="#" onclick="Ext.getCmp(\'LockableCarousel\').unlock();">Unlock</a>',
           style: 'background-color: #759E60'
        
     ]
));

【讨论】：

感谢代码示例。它甚至禁用了指示器，所以我确实只需要暂时锁定轮播。

非常简单。我将“锁定”变量移动到配置对象中，以便在添加自定义轮播时设置默认锁定状态。这会将访问锁定的 var 更改为：this.getLocked();

【参考方案2】：

尝试在 Carousel 中覆盖 afterRender 方法；（我删除了 childs 方法上的拖动事件）

   afterRender : function() 
        Ext.Carousel.superclass.afterRender.call(this);
        this.mon(this.body, 
        direction : this.direction,
        scope : this
        );
        this.el.addCls(this.baseCls + "-" + this.direction)
    

完整的代码；

 this.car =  new Ext.Carousel(
                ui       : 'light',
                items: [
                
                        html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>',
                        cls : 'card card1'
                    ,
                    
                        html: 'Card #2',
                        cls : 'card card2'
                    ,
                    
                        html: 'Card #3',
                        cls : 'card card3'
                    ],
                        afterRender : function() 
                            Ext.Carousel.superclass.afterRender.call(this);
                            this.mon(this.body, 
                                direction : this.direction,
                                scope : this
                            );
                            this.el.addCls(this.baseCls + "-" + this.direction)
                        
        );

【讨论】：

谢谢，它有效。但我不确定它是怎么做的 :) 你能解释一下吗？

当然。想法很简单。我们必须禁用拖动，在这种情况下，可以删除拖动侦听器。在 sencha-touch.js 的 afterRender 方法中添加了拖动监听器。我们重写了 afterRender 方法，所以 sencha-touch 的 afterRender 方法不会运行，我们的新方法运行并且我们的方法不会添加拖动监听器。我希望这个描述是清楚的。 :)