The Carousel of Sencha Touch

1. Target effect:

The left and right arrows click on the Item page, the first page can only be toggled to the left, and the last page can only switch.

2. Arrangement of ideas

button and Carousel are in a contaienr.

Container relative positioning, button absolute positioning.

3. Code implementation

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) {
                             //First page does not show left arrow
                             leftbtn.hide ();

}else if (carousel.getactiveindex () = = = Carousel.getitems (). length-1) {
The last page does not show the right arrow
Rightbtn.hide ();

}else{
Show left and right arrows ~
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. Problems encountered

Icon for button

1. Display

ST's button did not set the text, the X-button-label display is none, his own style is not displayed, and then wrote in the text "&nbsp&nbsp&nbsp& NBSP&NBSP "is used to indicate that a space can be displayed.

2, before positioning

The hardest part of feeling before is its positioning.

Recently learned a trick, for example:

There is a span and span.before, and my approach is:

The position of span is relative,

The position of before is absolute,

This way the before is definitely positioned relative to span.

3, similar style of processing.

You can see in the code that, in order not to write duplicate styles, you use the

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

It allows styles with style names that match the criteria to have the following styles.

All right, finish it, come on!

The Carousel of Sencha Touch