The Carousel of Sencha Touch

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.