200 lines
4.0 KiB
Vue
200 lines
4.0 KiB
Vue
<template>
|
|
<view class="swiper-wrap">
|
|
<swiper
|
|
class="swiper"
|
|
ref="swiper"
|
|
:autoplay="autoplay"
|
|
:circular="circular"
|
|
:interval="interval"
|
|
:duration="duration"
|
|
@change="changeSwiper"
|
|
>
|
|
<block v-for="(item, index) in urls" :key="index">
|
|
<swiper-item @tap="previewSwiperItem(index)">
|
|
<view v-if="item['type'] === 'video'" class="video-wrap">
|
|
<j-video
|
|
width="750rpx"
|
|
height="750rpx"
|
|
:url="item.url"
|
|
:poster="videoCover"
|
|
/>
|
|
</view>
|
|
|
|
<u-image width="750" height="750" :src="item.uri" mode="scaleToFill" />
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
|
|
<view class="dots black sm bg-white br60">{{ currentSwiperIndex + 1 }}/{{ urls.length || 0 }}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentSwiperIndex: 0,
|
|
showPlay: true,
|
|
showControls: false,
|
|
autoplay: true,
|
|
videoContext: null,
|
|
}
|
|
},
|
|
|
|
|
|
props: {
|
|
// 图片链接列表
|
|
images: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
|
|
// 视频链接
|
|
video: {
|
|
type: [String, Boolean],
|
|
default: false,
|
|
},
|
|
|
|
// 视频封面
|
|
videoCover: {
|
|
type: [String, Boolean],
|
|
default:false
|
|
},
|
|
|
|
// 衔接滑动，即播放到末尾后重新回到开头
|
|
circular: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
|
|
// 自动切换时间间隔
|
|
interval: {
|
|
type: Number,
|
|
default: 3 * 1000,
|
|
},
|
|
|
|
// 滑动动画时长
|
|
duration: {
|
|
type: Number,
|
|
default: 500,
|
|
},
|
|
},
|
|
|
|
|
|
computed: {
|
|
urls() {
|
|
const images = this.images.map(item => ({ uri: item.uri, type: 'image' }))
|
|
|
|
return this.video
|
|
? [{ uri: this.video, type: 'video' }, ...images]
|
|
: images
|
|
}
|
|
},
|
|
|
|
|
|
mounted() {
|
|
this.videoContext = uni.createVideoContext('video', this)
|
|
},
|
|
|
|
|
|
methods: {
|
|
// 切换Swiper项
|
|
changeSwiper(e) {
|
|
this.currentSwiperIndex = e.detail.current
|
|
},
|
|
|
|
// 视频异常
|
|
videoErrorCallback(err) {
|
|
throw new Error(err)
|
|
},
|
|
|
|
// 查看Swiper项
|
|
previewSwiperItem(current) {
|
|
const type = this.urls[current].type
|
|
|
|
// #ifdef MP-WEIXIN
|
|
wx.previewMedia({
|
|
current,
|
|
sources: this.urls,
|
|
})
|
|
//#endif
|
|
|
|
// #ifdef H5 || APP-PLUS
|
|
const index = this.video ? current - 1 : current
|
|
type === "video"
|
|
? this.videoContext.requestFullScreen()
|
|
: uni.previewImage({ index, urls: this.images })
|
|
//#endif
|
|
},
|
|
|
|
// 视频播放
|
|
playVideo() {
|
|
// this.videoContext.play()
|
|
},
|
|
|
|
// 当视频进入和退出全屏时触发
|
|
fullscreenchange(e) {
|
|
const { fullScreen } = e.detail
|
|
this.showPlay = !fullScreen
|
|
this.showControls = !!fullScreen
|
|
console.log(fullScreen)
|
|
!!fullScreen && this.videoContext.play()
|
|
!fullScreen && this.videoContext.pause()
|
|
}
|
|
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.swiper-wrap {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.swiper-wrap .swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.swiper-wrap .swiper .slide-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-wrap .dots {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
bottom: 24rpx;
|
|
display: flex;
|
|
height: 34rpx;
|
|
padding: 0 15rpx;
|
|
}
|
|
|
|
.swiper-wrap .video-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-wrap .video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-wrap .icon-play {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 999;
|
|
}
|
|
</style>
|