uni-app 轮播图zt-swiper - 生涯 app端 图片转到视频后直接被视频页面霸占 切换选项卡直接消失 指示点也消失

在处理 uni-app 中的 zt-swiper 轮播图组件时，如果你遇到图片切换到视频后页面被视频霸占，同时切换选项卡时指示点和轮播效果消失的问题，通常这是由于视频组件的自动播放或全屏播放特性导致的页面重绘或布局错乱。

以下是一个基本的代码示例，展示了如何在 uni-app 中使用 swiper 组件来处理图片和视频切换，并尝试解决上述问题。这里我们主要关注如何确保在视频播放时不影响轮播图的正常显示和切换功能。

<template>
  <view class="container">
    <swiper
      class="swiper"
      indicator-dots="true"
      autoplay="true"
      interval="3000"
      duration="500"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view v-if="item.type === 'image'">
          <image :src="item.src" class="swiper-image"></image>
        </view>
        <view v-else-if="item.type === 'video'">
          <video
            :src="item.src"
            class="swiper-video"
            controls
            show-center-play-btn
            object-fit="cover"
            @play="onVideoPlay(index)"
            @pause="onVideoPause(index)"
          ></video>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { type: 'image', src: '/static/image1.jpg' },
        { type: 'video', src: '/static/video1.mp4' },
        { type: 'image', src: '/static/image2.jpg' },
      ],
      currentVideoIndex: null,
    };
  },
  methods: {
    onSwiperChange(e) {
      if (this.currentVideoIndex !== null) {
        this.$refs[`video-${this.currentVideoIndex}`][0].pause();
      }
      this.currentVideoIndex = e.detail.current;
      if (this.items[e.detail.current].type === 'video') {
        this.$nextTick(() => {
          this.$refs[`video-${e.detail.current}`][0].play();
        });
      }
    },
    onVideoPlay(index) {
      this.currentVideoIndex = index;
    },
    onVideoPause(index) {
      if (this.currentVideoIndex === index) {
        this.currentVideoIndex = null;
      }
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-image, .swiper-video {
  width: 100%;
  height: 100%;
}
.swiper-video {
  object-fit: cover;
}
</style>

在这个示例中，我们使用了 v-if 和 v-else-if 来区分图片和视频，并为视频添加了 play 和 pause 事件监听器。当切换到视频时，如果当前有视频播放，则暂停它，并开始播放新视频。同时，我们维护了一个 currentVideoIndex 来跟踪当前播放的视频索引，以确保在切换时能够正确管理视频的播放状态。

注意，这种方法可能需要根据实际情况进行调整，特别是针对视频播放的全屏模式和自动播放策略的处理。