Question

我创建了一个无限滑动选项的旋转木马。如果用户从最后一个项目向左滑动，则会出现第一个项目，如果从第一个项目向右滑动，则会出现最后一个项目。幻灯片效果适用于每个滑动事件，但从最后一个项目滑动到第一个项目并从第一个项目滑动到最后一个项目时，幻灯片效果不起作用。这是我的代码 -

categorizedCarousel = Ext.create('Ext.Carousel', {
        title: record.data.name,
        layout: {
            type: 'vbox',
            pack: 'center'
        },
        listeners: {
            element: 'element',
            swipe: function(e) {
                if (e.direction == 'right') {

                    if (this.getActiveIndex() === 0) {
                        this.animateActiveItem(this.getMaxItemIndex(), {type: 'slide', direction: 'right'});
                    }
                } else {

                    if (this.getActiveIndex() === this.getMaxItemIndex()) {
                        this.animateActiveItem(0, {type: 'slide', direction: 'left'});
                    }
                }
            }
        }
    });

上面的“{type：'slide'，direction：'right / left'}”不起作用。我试图找到这个解决方案很长一段时间，超过2周，但仍然没有解决方案。任何solutin polease？

Answer 1

我假设您实际上没有在dom中以正确顺序显示图像以便能够显示此幻灯片动画。例如：

<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>

如果你想从img 4滑动到img1，你首先必须在imm 4中放置img 1，以便它们彼此相邻 - 你可以通过保持移动每个项目来做到这一点周围或只是在开始和结束时克隆第一个和最后一个项目，一旦动画完成，跳回到实际项目：

在sipe之前从4到1：

<li>img 4 clone</li>
<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li active>img 4</li>
<li>img 1 copy</li>

动画制作：

<li>img 4 clone</li>
<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>
<li active>img 1 copy</li>

完成动画（跳转到实际的img 1）

<li>img 4 clone</li>
<li active>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>
<li>img 1 copy</li>

Answer 2

您的实施不起作用（或可能永远不会起作用）的原因：

Ext.Carousel项目轮播的事件为dragstart和dragend，而不是swipe。它们的性质完全不同。
animateActiveItem不适合在旋转木马中的项目之间制作动画。
当您从右向左“拖动”到最后一个项目时，您无法“预览”第一个项目，因为它不在那里。

这是Ext.Carousel的有效覆盖。它完全符合你的要求。基本上它的想法是“旋转”旋转木马的items配置，然后强制刷新它。

Ext.define('myApp.view.InfCarousel',{
  xtype: 'InfCarousel',
  extend: 'Ext.carousel.Carousel',

  rotateItemBack: function(item){
    if(!item) return null;
    var initem = item.items;
    var numitems = initem.length;
    var newItem = [];

    newItem.push(initem[numitems-1]);
    for(i=0; i<numitems-1; ++i)
      newItem.push(initem[i]);

    return newItem;
  },

  rotateItemFront: function(item){
    if(!item) return null;
    var initem = item.items;
    var numitems = initem.length;
    var newItem = [];

    for(i=0; i<numitems-1; ++i)
      newItem.push(initem[i+1]);

    newItem.push(initem[0]);

    return newItem;
  },

  config:{
    indicator: false,
    listeners:{
        activeitemchange:function(){
            this.fireEvent('activeitemchangeloop', arguments);
        },

        activeitemchangeloop: function ()
        {
          var activeIndex = this.getActiveIndex(),
              maxIndex = this.getMaxItemIndex();

          if(activeIndex == 0)
          {
              var items = this.getItems();

              var newItems = this.rotateItemBack(items);
              this.removeAll(false, false);
              this.add(newItems);

              this.setActiveItem(1);
              this.refresh();
          }

          else if(activeIndex == maxIndex)
          {
              var items = this.getItems();

              var newItems = this.rotateItemFront(items);
              this.removeAll(false, false);
              this.add(newItems);

              this.setActiveItem(maxIndex-1);
              this.refresh();
          }      
        }
    }
  }

});

注意：如果您仍想自己实施，请务必查看Ext.Carousel 的源代码，此处：http://docs-origin.sencha.com/touch/2.3.0/source/Carousel.html#Ext-carousel-Carousel（深入了解一下在next和previous方法）

幻灯片效果不起作用

2 个答案: