3

我创建了一个无限滑动选项的轮播。如果用户从最后一个项目向左滑动，将出现第一个项目，如果从第一个项目向右滑动，将出现最后一个项目。滑动效果适用于每个滑动事件，但滑动效果在从最后一项滑动到第一项以及从第一项滑动到最后一项时不起作用。这是我的代码-

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 周，但仍然没有解决方案。任何溶液素极性酶？

4

2 回答 2

0

我假设您实际上并没有在 dom 中以正确的顺序来显示此幻灯片动画。例如：

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

如果你想从 img 4 滑动到 img1，你首先必须将 img 1 AFTER img 4 放在 dom 中，这样它们就可以很好地彼此相邻 - 你可以通过继续移动每个项目来做到这一点，或者只是在开始和结束处复制第一个和最后一个项目，一旦动画完成，跳回实际项目：

刀槽花纹从 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>
于 2013-11-21T09:13:34.710 回答
0

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

  • 项目轮换的事件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方法）

于 2013-11-21T10:22:16.263 回答