uniapp实现app端图片+视频轮播
swiper轮播里面,可能有图片也可能有视频。当swiper切换到视频时,视频以动画的样式展示(无按钮、进度条等默认播放控件),自动轮播取消,手动滑动切换取消。当视频播放完毕后,可以自动轮播,可以手动滑动切换。③使用@ended,用来判断视频当播放到末尾时触发事件,解开自动轮播,手动滑动切换。autoplay="autoplay"(是否自动切换)原swiperChange方法中添加判断,实现切换到
需求: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>
更多推荐
所有评论(0)