左右键切换大屏tab页
需求在制作大屏的时候,有时候会遇到几个大屏轮播的情况,大屏轮播具体是通过tab页实现,我们可以实现隐藏tab标题,让tab定时切换。然而我们想实现通过按键随时切换tab页,更加灵活的去查看大屏,这时候需要通过js来实现。
实现思路
通过设置监听事件,监听按键:
当按左键时,当前tab切换到上一个tab按右键时,切换到下一tab 2. 极端情况:当目前在最后一个tab时,按右键,切换到第一个tab 当目前在第一个tab时,按左键,切换到最后一个tab
具体js
1.首先在tabpane0添加tab切换事件
setTimeout(function(){
window.CardIndex=_g().getWidgetByName("tabpane0").getShowIndex();//记录当前的tab页索引
},10);2.在tabpane0设置初始化事件
我这边有4个tab页,索引为0,1,2,3$('div:lt(1)',this.element.parent()).hide();//隐藏tab标题
setTimeout(function(){
var aa = window.CardIndex;//当前tab页索引
document.onkeydown=function(event){//设置监听事件
var e = event || window.event;
if(e && e.keyCode==37){ // 按 左键
if(aa==0){//当在第一个页面,按左键,直接调至最后一个页面
_g().getWidgetByName("tabpane0").showCardByIndex(3);
aa=3;
}else{
_g().getWidgetByName("tabpane0").showCardByIndex(--aa);
}
}
if(e && e.keyCode==39){ // 按右键,以上相反
if(aa==3){
_g().getWidgetByName("tabpane0").showCardByIndex(0);
aa=0;
}else{
_g().getWidgetByName("tabpane0").showCardByIndex(++aa);
}
}
};},10);如上,根据你们tab页的个数,调整值就行,比如3个tab页,最大的索引就是2。
欢迎加本人微信YSL_520Y交流。