uni-app中swiper组件加入视频后无法全屏显示方案解决

今天，在写uni-app的代码过程中，发现swiper组件里面的视频不能占全屏，出不来效果，虽然官网也说

自动设置了100%是没错，但是，再次设置宽高100%，不起作用，同时还会导致swiper组件不显示。这问题真是让人搞到头皮发麻。
问题如下：

解决方案：
代码如下：

<template>
<view class="videoList">
<view class="swiper-box">
<swiper class="swiper" :vertical="true">
<swiper-item class="swiper-item">
<video-player></video-player>
</swiper-item>
<swiper-item class="swiper-item">
<video-player></video-player>
</swiper-item>
<swiper-item class="swiper-item">
<video-player></video-player>
</swiper-item>
</swiper>
</view>
</view>
</template>

<script>
import videoPlayer from "@/pages/components/videoPlayer";
export default {
data() {
return {
}
},
onLoad() {

},
methods: {
},
components: {
videoPlayer
}
}
</script>

<style>
.videoList {
width: 100%;
height: 100%;
}
.swiper-box {
height: 100vh;
}
.swiper {
height: 100vh;
}
.swiper-item {
height: 100vh;
}
</style>

 

主要就是height：100%变成100vh;
100vh其实就是占据全屏元素，和屏幕高度一致

效果如图：

————————————————
版权声明：本文为CSDN博主「无语，人生的过客� � �」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/li22356/article/details/118970181