冬瓜鸡汤
冬瓜鸡汤
  • 发布:2017-02-09 11:46
  • 更新:2017-02-21 00:49
  • 阅读:1427

视频全屏造成可拖动选项卡定位错乱的问题

分类:MUI

我把视频播放嵌套在第每一个选项卡的子项里面,视频全屏播放后退出后,发现选项卡已经不是在当前播放视频的那个选项卡位置,而是定位到下一个选项卡的位置。只有偶数的选项卡会有这个问题,奇数的不会。

2017-02-09 11:46 负责人:无 分享
已邀请:
CJH

CJH - 我想要的,我自然会认真

依旧以Hello mui中的例子为例,在第二个选项中添加一个video标签。

首先,定义一个变量,用来记录选项卡的位置;

复制代码var sliderNum = 0;    

第二步监听slide事件,更新选项卡位置;

复制代码document.getElementById('slider').addEventListener('slide', function(e) {  
    sliderNum = e.detail.slideNumber;  
});  

第三步,当视频全屏变化时,使其切换到正确的位置。

复制代码var videoEl = document.querySelector('video');  
videoEl.addEventListener('webkitfullscreenchange', function(){  
    console.log(sliderNum);  
    mui('#slider').slider().gotoItem(sliderNum);  
});  

完整代码请参考附件中的文件。

冬瓜鸡汤

冬瓜鸡汤 (作者) - 程序猿

直接在全屏事件里调用切换事件没有效果,我用延迟函数去调用

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容