uni-app 轮播图视频+图片 视频图片全屏预览 两种方法

项目场景：

在做商城项目的时候，商品详情的轮播图需要同时显示视频和图片，并且能够全局预览

---

解决方案：

• 如果项目里有uview这个组件库，可以通过swiper轮播图的指定类型进行解决，点击这里进行跳转
  
• 也可以通过uni-app自带的swiper去解决这个问题，点击这里进行跳转

---

具体代码：

就目前的两种方案，第二种方案代码繁琐，但是更好扩展，如果只是简简单单实现功能，第一种方案足以

• 方案一的代码主要见官网，讲解清晰
• 方案二的代码

        <swiper
          indicator-dots="true"
          indicator-color="#FCF3F3"
          indicator-active-color="#EC3A40"
          class="swiper-view"
        >
          <swiper-item
            class="swiper-video"
            v-if="detailData.productVideo.length"
          >
            <view>
              <view
                style="position: relative"
                v-if="detailData.productVideo.length"
              >
                <video
                  id="myVideo"
                  :src="detailData.productVideo[0].content"
                  :show-center-play-btn="false"
                  :controls="true"
                  object-fit="fill"
                  @fullscreenchange="fullscreenchange"
                ></video>
              </view>
            </view>
          </swiper-item>

          <swiper-item
            class="swiper-img"
            v-for="(item, index) in detailData.pictureList"
            :key="index"
          >
            <image
              mode="scaleToFill"
              :src="item.content"
              @click="previewImage(index)"
            ></image>
          </swiper-item>
        </swiper>

代码的主要思路： 两个swiper-item，一个用来展示视频，一个用来展示图片。展示视频用到uni-app的video，video有个属性controls设置为true，出现视频控件，点击就可以全屏展示视频了；展示图片就用到image，点击图片的时候调用uni.previewImage(OBJECT)，点击这里跳转此方法，具体参数看官网文档，就实现此功能啦！

有任何问题可以私聊评论