uniapp实现app端图片+视频轮播

需求：swiper轮播里面，可能有图片也可能有视频。当swiper切换到视频时，视频以动画的样式展示（无按钮、进度条等默认播放控件），自动轮播取消，手动滑动切换取消。当视频播放完毕后，可以自动轮播，可以手动滑动切换。

找了个插件市场里的改的。（感谢大佬的插件！）

第一步：使用DCloud插件swiper-video-image - DCloud 插件市场

第二步：①video标签里加属性。实现隐藏按钮、进度条等默认播放控件

                        controls = "false"

              ②原swiperChange方法中添加判断，实现切换到视频时，自动轮播取消，手动滑动切换取消。

                    if (obj[this.typeName] === 'video'){
                       this.touch = true
                        this.autoplay = false
                    }    

                    swiper标签中加属性

                        :disable-touch = "touch"（是否禁止用户 touch 操作）

                        :autoplay="autoplay"（是否自动切换）

              ③使用@ended，用来判断视频当播放到末尾时触发事件，解开自动轮播，手动滑动切换。

                   @ended="videoEnded"

                videoEnded(){
                    this.touch = false
                    this.autoplay = true
                },

部分代码：

<template>
	<view class="content">
		<view class="screen-swiper-box">
			<swiper :current="index" @change="swiperChange" class="screen-swiper" indicator-dots="true" :circular="circular"
				:autoplay="autoplay" :interval="interval" duration="500" :style="[whStyle]" :disable-touch = "touch">
				<swiper-item v-for="(item, i) in list" :key="i" :id="i">
					<video v-if="item[typeName] == videoValue" :id="'myVideo-'+i" class="myVideo" :src="item[linkName]"
						controls = "false" objectFit="cover" enable-progress-gesture="false" show-loading="true"
						play-btn-position="center" show-fullscreen-btn="true" :style="[whStyle]"
						@click="swiperClick(item,i)" @ended="videoEnded"></video>
					<image v-if="item[typeName] == imgvalue" class="swiperImage" :src="item[linkName]" mode="scaleToFill"
						:style="[whStyle]" @click="swiperClick(item,i)">
					</image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			index: 0, // 当前页
			videoCtx: '',
			touch:false,
		}
	},
	methods: {
		videoEnded(){
			this.touch = false
			this.autoplay = true
		},
		swiperChange(e) {
			// 获取上一个
			let obj = this.list[this.index]
			if (obj[this.typeName] == this.videoValue) {
				// console.log('暂停', this.index)
				this.videoCtx = uni.createVideoContext('myVideo-' + this.index, this)
				this.videoCtx.pause()
			}

			// 获取当前
			this.index = e.detail.current // 更新当前index
			obj = this.list[this.index]
			if (obj[this.typeName] == this.videoValue && this.autoPlayVideo) {
				// console.log('播放', this.index)
				this.videoCtx = uni.createVideoContext('myVideo-' + this.index, this)
				this.videoCtx.play()
			}
			this.$emit('swiperChange', this.index)
			if (obj[this.typeName] === 'video'){
				this.touch = true
				this.autoplay = false
			}
		},
	},
}
</script>