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其实就是占据全屏元素，和屏幕高度一致

效果如图：