<template>
<van-swipe class="videoImgSwiper" ref="mySwiper" :show-indicators="false" :touchable="false" v-if="initOrNot">
<van-swipe-item v-for="(item, index) in mediums" :key="index">
<img v-if="item.type == 2" :src="item.url" class="media">
<video v-if="item.type == 1" :src="item.url" id="videoTime" class="media" poster="./img/loading.gif"
@ended="endVideo(index)"></video>
</van-swipe-item>
</van-swipe>
</template>
<script>
export default {
props: {
//广告列表 1为视频,2为图片
mediums: {
type: Array,
default: () => [],
required: true
},
autop
基于VantSwipe封装视频图片混合轮播组件
于 2023-09-12 17:48:22 首次发布
本文将详细介绍如何利用VantSwipe组件,结合JavaScript和Vue.js技术,封装一个支持视频和图片混合展示的轮播组件。通过该组件,可以实现灵活切换视频和图片,提供丰富的用户体验。
摘要由CSDN通过智能技术生成