[英]Sencha Touch 2 carousel indicator tap events
我有一個Sencha Touch 2傳送帶(請參閱http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html )。 當活動項目為第一個並且用戶嘗試向后導航時,我需要捕獲事件。 同樣,當活動項目是最后一個項目並且用戶嘗試向前導航時。
我在Sencha Touch文檔上沒有找到任何滿足我需求的東西: http : //docs.sencha.com/touch/2.2.0/#!/api/Ext.carousel.Carousel
讓我們從這里開始:
Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]});
var activeItem = 0; // initial active carousel item
Ext.create('Ext.Carousel', {
fullscreen: true,
id: 'q-car',
defaults: {
styleHtmlContent: true
},
initialize: function(){
var caru = Ext.getCmp('q-car'),
ind = caru.getIndicator();
ind.onTap = function(e){
var touch = e.touch,
box = this.element.getPageBox(),
centerX = box.left + (box.width / 2),
centerY = box.top + (box.height / 2),
direction = this.getDirection(),
itemsCount = caru.getItems().length-2; // items length includes the indicator bar.
if(direction === 'horizontal'){
if(touch.pageX >= centerX){
if(activeItem < itemsCount){
this.fireEvent('next', this);
activeItem++
}else{
console.log('end of carousel')
}
}else{
if(activeItem > 0){
this.fireEvent('next', this);
activeItem--
}else{
console.log('begin of carousel')
}
}
}
}
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.