左右键切换大屏tab页

需求

在制作大屏的时候，有时候会遇到几个大屏轮播的情况，大屏轮播具体是通过tab页实现，我们可以实现隐藏tab标题，让tab定时切换。

然而我们想实现通过按键随时切换tab页，更加灵活的去查看大屏，这时候需要通过js来实现。

实现思路

• 通过设置监听事件，监听按键：
  

当按左键时，当前tab切换到上一个tab

按右键时，切换到下一tab

   2. 极端情况：

当目前在最后一个tab时，按右键，切换到第一个tab

当目前在第一个tab时，按左键，切换到最后一个tab

具体js
1.首先在tabpane0添加tab切换事件

1. setTimeout(function(){
   
2.         window.CardIndex=_g().getWidgetByName("tabpane0").getShowIndex();//记录当前的tab页索引
   
3. },10);

复制代码

2.在tabpane0设置初始化事件

我这边有4个tab页，索引为0,1,2,3

1. $('div:lt(1)',this.element.parent()).hide();//隐藏tab标题
   
2. setTimeout(function(){
   
3.         var aa = window.CardIndex;//当前tab页索引
   
4.      document.onkeydown=function(event){//设置监听事件
   
5.   var e = event || window.event;
   
6. if(e && e.keyCode==37){ // 按 左键
   
7.         if(aa==0){//当在第一个页面，按左键，直接调至最后一个页面
   
8.                  _g().getWidgetByName("tabpane0").showCardByIndex(3);
   
9.                  aa=3;
   
10.         }else{
    
11.                  _g().getWidgetByName("tabpane0").showCardByIndex(--aa);
    
12.         }
    
13.      }
    
14.   if(e && e.keyCode==39){ // 按右键，以上相反
    
15.           if(aa==3){
    
16.                   _g().getWidgetByName("tabpane0").showCardByIndex(0);
    
17.                   aa=0;
    
18.           }else{
    
19.            _g().getWidgetByName("tabpane0").showCardByIndex(++aa);
    
20.           }
    
21.      }
    
22. };},10);

复制代码

如上，根据你们tab页的个数，调整值就行，比如3个tab页，最大的索引就是2。
欢迎加本人微信YSL_520Y交流。

是给tabpane添加初始化事件吗？我试了没生效。能否看一下你的模板效果

亲测有用，感谢，可能部分浏览器上不生效

已提名精华帖，待论坛运营委员会评分后可评为精华帖，帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html

老哥 ，这是 只有pc支持吧

Xxcnb 发表于 2019-11-16 22:50
老哥 ，这是 只有pc支持吧

是的，移动端本身就是平均居中的

谢谢分享！！！！

10版本不起作用？

牛逼的类类

10.0测试没效果

6666666