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

実装が機能しない (または機能しない可能性がある) 理由:

  • で回転するアイテムのイベントはであり、 でExt.Carouselはありません。それらは性質がまったく異なります。dragstartdragendswipe

  • 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 に答える
0

このスライド アニメーションを表示できるようにするには、実際には dom に正しい順序で画像を配置していないと思います。例えば：

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

img 4 から img1 にスワイプしたい場合は、最初に img 1 を dom 内に img 4 の後に配置する必要があります。これにより、それらが隣り合って適切に配置されます。これを行うには、すべてのアイテムを移動し続けるか、単に最初と最後に最初と最後のアイテムのクローンを作成し、アニメーションが完了したら、実際のアイテムに戻ります。

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>

アニメーション終了時 (実際の画像 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 に答える