解决轮播图大小不一致显示空白的问题

src/pages/buy/index.vue

 <template>
   <div class="buy-container">
-    <van-swipe class="my-swipe" indicator-color="white">
+    <van-swipe class="my-swipe" indicator-color="white" @change="index => swipeAcitve = index">
       <van-swipe-item class="video" v-if="details.main_chart_oss" @click="handleVideoClick">
         <video :src="details.main_chart_oss" controls="controls" ref="video"></video>
         <van-icon :name="videoPlay ? 'pause-circle-o':'play-circle-o'" />
       </van-swipe-item>
-      <van-swipe-item v-for="item in imgList" :key="item.url">
-        <img :src="item.url">
+      <van-swipe-item v-for="(item, index) in imgList" :key="item.url">
+        <img v-show="swipeAcitve === index + 1" :src="item.url">
       </van-swipe-item>
     </van-swipe>
     <div class="item price-item">
@@ -58,6 +58,7 @@ export default {
   components: { BuyPopup, PhoneCodeLoginPopup },
   data() {
     return {
+      swipeAcitve: 0,
       popupVisiable: false,
       loginPopupVisiable: false,
       videoPlay: false,
@@ -108,6 +109,9 @@ export default {
     }
   },
   methods: {
+    handleSwipeChange(val) {
+      console.log(val)
+    },
     handleVideoClick() {
       const video = this.$refs.video
       if (this.videoPlay) {