左右键切换大屏tab页

我是社区第91411位番薯,欢迎点我头像关注我哦~
需求
在制作大屏的时候,有时候会遇到几个大屏轮播的情况,大屏轮播具体是通过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交流。


参与人数 +1 F豆 +200 理由
兔子酱 + 200 骚年,我看好你哦

查看全部评分

发表于 2018-1-18 09:41:21
是给tabpane添加初始化事件吗?我试了没生效。能否看一下你的模板效果
发表于 2018-1-18 10:00:47
亲测有用,感谢,可能部分浏览器上不生效
发表于 2018-1-18 11:55:37
已提名精华帖,待论坛运营委员会评分后可评为精华帖,帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
发表于 2018-1-18 12:05:43
发表于 2018-1-22 19:08:23
发表于 2018-2-5 09:44:18
发表于 2019-11-16 22:50:33
老哥 ,这是 只有pc支持吧
发表于 2019-11-19 19:54:19
Xxcnb 发表于 2019-11-16 22:50
老哥 ,这是 只有pc支持吧

是的,移动端本身就是平均居中的
发表于 2019-11-19 21:10:55
谢谢分享!!!!
发表于 2020-4-26 15:53:28
10版本不起作用?
发表于 2020-4-29 10:24:12
牛逼的类类
发表于 2021-3-22 16:26:12
10.0测试没效果
发表于 2022-8-26 09:46:41
6666666
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

17回帖数 4关注人数 14807浏览人数
最后回复于:2022-8-26 09:46

返回顶部 返回列表