uniapp实现app端图片+视频轮播-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

文章来源地址https://www.toymoban.com/news/detail-433649.html

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