You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
4.9 KiB
193 lines
4.9 KiB
<template>
|
|
<view class="content">
|
|
<view class="screen-swiper-box">
|
|
<swiper :current="index" @change="swiperChange" class="screen-swiper" indicator-dots :circular="circular"
|
|
:autoplay="autoplay" :interval="interval" duration="500" :style="[whStyle]">
|
|
<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
|
|
:play-btn-position="center" :show-fullscreen-btn="false" :style="[whStyle]"
|
|
@click="swiperClick(item,i)"></video>
|
|
<image v-if="item[typeName] == imgvalue" class="swiperImage" :src="item[linkName]" mode="aspectFill"
|
|
:style="[whStyle]" @click="swiperClick(item,i)">
|
|
</image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="screen-swiper-bar flex align-center">
|
|
{{ index + 1 }} / {{ list.length }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* @property {Array} list 图片/视频列表
|
|
* @property {String | Number} width 显示视频/图片的宽度
|
|
* @property {String | Number} height 显示视频/图片的高度
|
|
* @property {String} linkName url字段字段
|
|
* @property {String} typeName 判断视频或者图片的字段
|
|
* @property {String} videoValue 判断视频的值
|
|
* @property {String} imgvalue 判断图片的值
|
|
* @property {Boolean} autoplay swiper是否自动切换
|
|
* @property {Boolean} circular swiper是否采用衔接滑动，即播放到末尾后重新回到开头
|
|
* @property {Boolean} autoPlayVideo swiper切换到视频是是否自动播放视频
|
|
* @property {Boolean} interval swiper自动切换时间间隔
|
|
* @event {Function} swiperClick 点击swiper时触发
|
|
* @event {Function} swiperChange swiper切换时触发
|
|
*/
|
|
export default {
|
|
props: {
|
|
// 图片/视频列表
|
|
list: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
// 用于显示视频/图片的宽度
|
|
width: {
|
|
type: String,
|
|
default: '750rpx'
|
|
},
|
|
// 用于显示视频/图片的高度
|
|
height: {
|
|
type: String,
|
|
default: '260rpx'
|
|
},
|
|
// 用与判断视频或者图片的字段
|
|
typeName: {
|
|
type: String,
|
|
default: 'type'
|
|
},
|
|
// 用于判断视频的值
|
|
videoValue: {
|
|
type: [String, Number],
|
|
default: 'video'
|
|
},
|
|
// 用于判断图片的值
|
|
imgvalue: {
|
|
type: [String, Number],
|
|
default: 'img'
|
|
},
|
|
// url字段
|
|
linkName: {
|
|
type: String,
|
|
default: 'link'
|
|
},
|
|
// swiper是否自动切换
|
|
autoplay: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// swiper是否采用衔接滑动，即播放到末尾后重新回到开头
|
|
circular: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// swiper切换到视频是是否自动播放视频
|
|
autoPlayVideo: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// swiper自动切换时间间隔
|
|
interval: {
|
|
type: Number,
|
|
default: 3500
|
|
}
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
index: 0, // 当前页
|
|
videoCtx: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
// 如果为true且第一个是视频的话就自动播放
|
|
if (this.autoPlayVideo) {
|
|
this.videoCtx = uni.createVideoContext('myVideo-' + 0, this)
|
|
this.videoCtx.play()
|
|
}
|
|
},
|
|
methods: {
|
|
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)
|
|
},
|
|
// 暂停播放
|
|
pause() {
|
|
let obj = this.list[this.index]
|
|
if (obj[this.typeName] == this.videoValue) {
|
|
this.videoCtx = uni.createVideoContext('myVideo-' + this.index, this)
|
|
this.videoCtx.pause()
|
|
}
|
|
},
|
|
// 播放
|
|
play() {
|
|
let obj = this.list[this.index]
|
|
if (obj[this.typeName] == this.videoValue) {
|
|
this.videoCtx = uni.createVideoContext('myVideo-' + this.index, this)
|
|
this.videoCtx.play()
|
|
}
|
|
},
|
|
// 点击当前视频或图片的回调
|
|
swiperClick(item, i) {
|
|
this.$emit('swiperClick', item, i)
|
|
}
|
|
},
|
|
computed: {
|
|
// 设置width和height属性
|
|
whStyle() {
|
|
let style = {}
|
|
style.width = this.width
|
|
style.height = this.height
|
|
return style
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
|
|
.screen-swiper-box {
|
|
position: relative;
|
|
.screen-swiper {
|
|
|
|
.swiperImage {}
|
|
|
|
.myVideo {}
|
|
}
|
|
}
|
|
|
|
.screen-swiper-bar {
|
|
position: absolute;
|
|
bottom: 24rpx;
|
|
right: 24rpx;
|
|
min-width: 80rpx;
|
|
padding: 4rpx 20rpx;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, .3);
|
|
border-radius: 22rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
</style>
|