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

这篇具有很好参考价值的文章主要介绍了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)，点击这里跳转此方法，具体参数看官网文档，就实现此功能啦！

有任何问题可以私聊评论文章来源地址https://www.toymoban.com/news/detail-521155.html

到了这里，关于uni-app 轮播图视频+图片视频图片全屏预览两种方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！