uniapp实现视频+图片,轮播图

芒果cium

已于 2022-09-19 15:51:42 修改

阅读量6.5k

点赞数 2

文章标签：小程序 uni-app vue.js 前端

于 2020-04-23 15:34:06 首次发布

本文链接：https://blog.csdn.net/weixin_45432615/article/details/105709074

版权

本文介绍了如何在uni-app中实现视频和图片结合的轮播效果，适用于小程序开发，主要涉及uni-app、vue.js前端技术。

摘要由CSDN通过智能技术生成

uniapp视频+图片,轮播图

<template>
	<swiper class="swiper" circular :current="current" @change="changeSwiper" @click="navTo" @mousedown="mousedown"
		@mouseup="mouseup" disable-touch>
		<swiper-item v-for="(item,index) in playList" :key="index">
			<view class="swiper-item-box" v-if="playType(item)==='video'">
				<video :id="'myVideo' + index" :src="item" :autoplay="false" :controls="false"
					:show-fullscreen-btn="false" :show-play-btn="false" :enable-progress-gesture="false"
					:show-center-play-btn="false" @ended="ended" @error="error" :muted="true"></video>
			</view>
			<view class="swiper-item-box" v-else-if="playType(item)==='img'">
				<image :src="item" mode="" class="swiper-item-img"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	import {
		ref,
		toRefs,
		defineComponent,
		reactive,
		getCurrentInstance
	} from "vue"
	import {
		onLoad
	} from "&