uniapp中swiper内嵌video组件的坑

uniapp中swiper内嵌video组件的坑

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

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

具体bug样子看下面图片叭

uniapp中swiper内嵌video组件的坑_第1张图片
你看,就是这样,太淘气了
我网上找了半天也没找到合适的解决方法,然后突然我就灵机一动,tab1和tab2的时候把它隐藏,tab3再把它显示出来,他就不会出现这样了

话不多说上代码:
uniapp中swiper内嵌video组件的坑_第2张图片

在这里插入图片描述
uniapp中swiper内嵌video组件的坑_第3张图片
嗯~~,giao ,很简单嘛,应该不会出现上面那个情况了吧!
uniapp中swiper内嵌video组件的坑_第4张图片

我又运行到手机上看的时候,满脑子的草泥马跑过去了
害,啥也不说了继续看图吧

uniapp中swiper内嵌video组件的坑_第5张图片
,什么鬼嘛,怎么只有一半的视频呀,呀~~,我多滑了几次,嘿~~,这咋还得看手速呢,手速快了就全展示了,手速慢了就是整个黑背景

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

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

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

uniapp中swiper内嵌video组件的坑_第6张图片
uniapp中swiper内嵌video组件的坑_第7张图片

来吧,展示!!!

uniapp中swiper内嵌video组件的坑_第8张图片 uniapp中swiper内嵌video组件的坑_第9张图片

这样就好了,感谢观看,本人菜鸟一枚,可能这是一个比较低级的问题了,但是还是想在这里记录一下以防以后遇到类似
如果你们也遇到这样的问题希望可以对你们有所帮助,有错误或者更好的建议的话也请各位大神多多指教

你可能感兴趣的:(前端,uniapp,video,vue.js,css,html,jquery)