sencha touch 之carousel

Posted 2020-07-23 茗小铭

1、目标效果：

左右箭头点击切换item页面,第一页只能向右切换，最后一页只能向左切换。

 

2、思路整理

button和carousel同处于一个contaienr。

container相对定位，button绝对定位。

3、代码实现

javascript

Ext.define(\'components.description.Ppt\', {
    extend: \'Ext.Container\',
    xtype: \'description-ppt\',
    config: {
        baseCls: \'description-ppt\',

        items: [
            {
                xtype: \'button\',
                text: \'&nbsp&nbsp&nbsp&nbsp&nbsp\',
                itemId: \'ppt-button-left\',
                cls: \'ppt-button-left\',
                listeners: {
                    tap: function(){
                        var container = this.up(\'description-ppt\'),
                            carousel = container.down(\'#ppt-carousel\');
                        carousel.setActiveItem(carousel.getActiveIndex()-1);
                    }
                }
            },
            {
                xtype: \'button\',
                text: \'&nbsp&nbsp&nbsp&nbsp&nbsp\',
                itemId: \'ppt-button-right\',
                cls: \'ppt-button-right\',
                listeners: {
                    tap: function(){
                        var container = this.up(\'description-ppt\'),
                            carousel = container.down(\'#ppt-carousel\');
                        carousel.setActiveItem(carousel.getActiveIndex()+1);
                    }
                }
            },
            {
                xtype: \'carousel\',
                indicator: false,
                itemId: \'ppt-carousel\',
                cls: \'ppt-carousel\',
                items: [ ],
                listeners: {
                    activeitemchange:function( carousel){
                        var container = this.up(\'description-ppt\'),
                            leftBtn = container.down(\'#ppt-button-left\'),
                            rightBtn = container.down(\'#ppt-button-right\');

                        if(carousel.getActiveIndex() === 0){
                            //第一页 不显示左箭头
                            leftBtn.hide();

                        }else if (carousel.getActiveIndex() === carousel.getItems().length-1){
                            //最后一页 不显示右箭头
                            rightBtn.hide();

                        }else{
                            //显示左右箭头~
                            if(leftBtn.isHidden()){
                                leftBtn.show();
                            }
                            if(rightBtn.isHidden()){
                                rightBtn.show();
                            }
                        }
                    }
                }
            }
        ]
    }

});

css

.description-ppt{
  width: 100%;
  height: 14rem;
  position: relative;

  [class^=\'ppt-button-\'],[class*=\'ppt-button-\']{
    background-image: none;
    border: 0;
    border-radius: 0;

    position: absolute;
    width: 2.5rem;
    height: 100%;
    background: #000;
    opacity: 0.1;

    .x-button-label:before{
      display: block;
      position: absolute;
      top: 4rem;
      width: 6rem;
      height: 6rem;
      line-height: 6rem !important;
      color: #fff;
      font-size: 6rem !important;
    }
  }

  .ppt-button-left{
    left: 0;
    .x-button-label:before{
      left: -1.8rem;
      font-family: \'myicon\';
      content: \'\\e909\';
    }
  }

 

  .ppt-button-right{
    right: 0;
    .x-button-label:before{
      right: -1.8rem;
      font-family: \'myicon\';
      content: \'\\e908\';
    }
  }

    .ppt-carousel{
      height: 14rem;
      img{
        width: 100%;
        height: 14rem;
      }
    }

}

4、遇到的问题

button的icon

1、显示

ST 的 button没有设置text的时候，x-button-label的display为none，自己写的样式也就显示不出来了，于是在text里写了“&nbsp&nbsp&nbsp&nbsp&nbsp”用来表示空格就可以显示了。

2、before定位

感觉before最难的部分是它的定位。

最近学了一招，举个例子：

有个span和span.before，我的做法是：

span的position为relative,

before的position为absolute,

这样before就相对于span做绝对定位啦。

3、相似样式的处理。

代码中可以看到，为了不写重复的样式，使用了

[class^=\'ppt-button-\'],[class*=\'ppt-button-\']

它可以让样式名满足条件的样式都有它下面的样式。

好啦，写完啦，加油~