uniapp中swiper内嵌video组件的坑

是使用uniapp写的项目,需求就是写一个tab切换,tab1里面是一段文本,tab2也是,tab3里面需要使用video组件插入一个视频,我是使用的scroll-view与swiper组件实现tab滑动切换页面(当时想的这有啥难,分分钟搞定的事情嘛不是,然而等我加上视频在手机运行的时候搞了大半天一直是有问题,唉,我还是太年轻🤕)。所以这次遇到的一个小坑,就在这里记录一下叭😜

问题的原因就是video标签的层级太高了,导致滑到视频页面再切换回前面tab的时候视频就会压到上面,不会正常隐藏了

具体bug样子看下面图片叭

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_jquery


你看,就是这样,太淘气了

我网上找了半天也没找到合适的解决方法,然后突然我就灵机一动,tab1和tab2的时候把它隐藏,tab3再把它显示出来,他就不会出现这样了话不多说上代码:

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_html_02

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_vue.js_03


uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_jquery_04


嗯~~,giao ,很简单嘛,应该不会出现上面那个情况了吧!

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_jquery_05

害,啥也不说了继续看图吧

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_html_06


😒😒😒😒😒😒😒😒,什么鬼嘛,怎么只有一半的视频呀,呀~~,我多滑了几次,嘿~~,这咋还得看手速呢,手速快了就全展示了,手速慢了就是整个黑背景

一顿操作猛如虎,一看战绩0杠5🙃

最后还是想到了一个解决办法,可能比较笨,但是我暂时也只到这了,剩下的智商还在努力开发中哈哈哈哈~

解决办法:给视频加上一个封面,(意思就是滑到视频页的时候封面展示出来,视频还是先隐藏着,点击封面上的开始按钮,视频展示出来,封面隐藏,就可以完美的展示并播放视频了,妈妈再也不用担心视频有问题了嘿嘿!!)

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_jquery_07


uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_jquery_08

来吧,展示!!!

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_jquery_09

uniapp ios video 无法覆盖原生导航栏 uniapp中video的问题_vue.js_10

这样就好了,感谢观看,本人菜鸟一枚,可能这是一个比较低级的问题了,但是还是想在这里记录一下以防以后遇到类似