mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
387 lines
9.2 KiB
Vue
387 lines
9.2 KiB
Vue
<template>
|
||
<view class="video-swiper" :style="{backgroundColor: bgColor,height: height+'rpx'}">
|
||
<swiper
|
||
class="video-swiper__wrapper"
|
||
:style="{
|
||
height: height+'rpx',
|
||
}"
|
||
@change="change"
|
||
:circular="circular"
|
||
:interval="interval"
|
||
:duration="duration"
|
||
:autoplay="autoplay"
|
||
:current="current"
|
||
:previousMargin="previousMargin+'rpx'"
|
||
:nextMargin="nextMargin+'rpx'"
|
||
:acceleration="acceleration"
|
||
:displayMultipleItems="displayMultipleItems"
|
||
:easingFunction="easingFunction"
|
||
>
|
||
<swiper-item
|
||
class="video-swiper__wrapper__item"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
>
|
||
<view
|
||
class="video-swiper__wrapper__item__wrapper"
|
||
:style="[itemStyle(index)]"
|
||
>
|
||
<image
|
||
class="video-swiper__wrapper__item__wrapper__image"
|
||
v-if="getItemType(item) === 'image'"
|
||
:src="getSource(item)"
|
||
:mode="imgMode"
|
||
@tap="clickHandler(index)"
|
||
:style="{
|
||
height: height+'rpx',
|
||
}"
|
||
></image>
|
||
<video
|
||
class="video-swiper__wrapper__item__wrapper__video"
|
||
v-if="getItemType(item) === 'video'"
|
||
:id="`video-${index}`"
|
||
:enable-progress-gesture="false"
|
||
:src="getSource(item)"
|
||
:poster="getPoster(item)"
|
||
:title="showTitle && item.title ? item.title : ''"
|
||
:style="{
|
||
height: height+'rpx',
|
||
}"
|
||
controls
|
||
@tap="clickHandler(index)"
|
||
:show-fullscreen-btn="false"
|
||
object-fit="fill"
|
||
></video>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="video-swiper__indicator">
|
||
<slot name="indicator">
|
||
<view class="video-swiper-indicator__wrapper">
|
||
<view
|
||
class="video-swiper-indicator_dot"
|
||
v-for="(item, index) in list.length"
|
||
:key="index"
|
||
:class="[index === currentIndex && 'video-swiper-indicator_active']"
|
||
>
|
||
</view>
|
||
</view>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'video-swiper',
|
||
props: {
|
||
// 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
|
||
list: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
// 是否显示面板指示器
|
||
indicator: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 指示器非激活颜色
|
||
indicatorActiveColor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
// 指示器的激活颜色
|
||
indicatorInactiveColor: {
|
||
type: String,
|
||
default:'rgba(255, 255, 255, 0.35)'
|
||
},
|
||
// 指示器样式，可通过bottom，left，right进行定位
|
||
indicatorStyle: {
|
||
type: [String, Object],
|
||
default: 'right'
|
||
},
|
||
// 指示器模式，line-线型，dot-点型
|
||
indicatorMode: {
|
||
type: String,
|
||
default: 'dot'
|
||
},
|
||
// 是否自动切换
|
||
autoplay: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 当前所在滑块的 index
|
||
current: {
|
||
type: [String, Number],
|
||
default: '0'
|
||
},
|
||
// 滑块自动切换时间间隔
|
||
interval: {
|
||
type: [String, Number],
|
||
default: 5000
|
||
},
|
||
// 滑块切换过程所需时间
|
||
duration: {
|
||
type: [String, Number],
|
||
default: 500
|
||
},
|
||
// 播放到末尾后是否重新回到开头
|
||
circular: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
|
||
previousMargin: {
|
||
type: [String, Number],
|
||
default: 0
|
||
},
|
||
// 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
|
||
nextMargin: {
|
||
type: [String, Number],
|
||
default: 0
|
||
},
|
||
// 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
|
||
acceleration: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 同时显示的滑块数量，nvue、支付宝小程序不支持
|
||
displayMultipleItems: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
// 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
|
||
// 只对微信小程序有效
|
||
easingFunction: {
|
||
type: String,
|
||
default: 'default'
|
||
},
|
||
// list数组中指定对象的目标属性名
|
||
keyName: {
|
||
type: String,
|
||
default: 'url'
|
||
},
|
||
// 图片的裁剪模式
|
||
imgMode: {
|
||
type: String,
|
||
default: 'aspectFill'
|
||
},
|
||
// 组件高度
|
||
height: {
|
||
type: [String, Number],
|
||
default: 350
|
||
},
|
||
// 背景颜色
|
||
bgColor: {
|
||
type: String,
|
||
default: '#f3f4f6'
|
||
},
|
||
// 组件圆角，数值或带单位的字符串
|
||
radius: {
|
||
type: [String, Number],
|
||
default: 4
|
||
},
|
||
// 是否加载中
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否显示标题，要求数组对象中有title属性
|
||
showTitle: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
currentIndex: 0,
|
||
}
|
||
},
|
||
watch: {
|
||
current(val, preVal) {
|
||
if(val === preVal) return;
|
||
this.currentIndex = val; // 和上游数据关联上
|
||
}
|
||
},
|
||
computed: {
|
||
itemStyle() {
|
||
return index => {
|
||
const style = {}
|
||
// #ifndef APP-NVUE || MP-TOUTIAO
|
||
// 左右流出空间的写法不支持nvue和头条
|
||
// 只有配置了此二值，才加上对应的圆角，以及缩放
|
||
if (this.nextMargin && this.previousMargin) {
|
||
style.borderRadius = this.radius+'rpx'
|
||
if (index !== this.currentIndex) style.transform = 'scale(0.92)'
|
||
}
|
||
// #endif
|
||
return style
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getItemType(item) {
|
||
if (typeof item === 'string') return 'image'
|
||
if (typeof item === 'object') {
|
||
if (item.type === 'image') return 'image'
|
||
if (item.type === 'video') return 'video'
|
||
return 'image'
|
||
}
|
||
},
|
||
// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
|
||
getSource(item) {
|
||
if (typeof item === 'string') return item
|
||
if (typeof item === 'object' && this.keyName) return item[this.keyName]
|
||
else console.log('请按格式传递列表参数');
|
||
return ''
|
||
},
|
||
// 轮播切换事件
|
||
change(e) {
|
||
// 当前的激活索引
|
||
const {
|
||
current
|
||
} = e.detail
|
||
this.pauseVideo(this.currentIndex)
|
||
this.currentIndex = current
|
||
this.$emit('change', e.detail)
|
||
},
|
||
// 切换轮播时，暂停视频播放
|
||
pauseVideo(index) {
|
||
const lastItem = this.getSource(this.list[index])
|
||
// 当视频隐藏时，暂停播放
|
||
const video = uni.createVideoContext(`video-${index}`, this)
|
||
video.pause()
|
||
},
|
||
// 当一个轮播item为视频时，获取它的视频海报
|
||
getPoster(item) {
|
||
return typeof item === 'object' && item.poster ? item.poster : ''
|
||
},
|
||
// 点击某个item,点击图片预览，点击视频播放
|
||
clickHandler(index) {
|
||
if(this.list[index].type && this.list[index].type === 'video'){
|
||
return
|
||
}
|
||
let imgArr = []
|
||
this.list.filter(item=>{
|
||
if(item.type == undefined || item.type==='image'){
|
||
imgArr.push(item.url)
|
||
}
|
||
})
|
||
// 预览图片
|
||
uni.previewImage({
|
||
current: index-1,
|
||
urls: imgArr
|
||
});
|
||
this.$emit('click', index)
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.video-swiper {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&__wrapper {
|
||
flex: 1;
|
||
|
||
&__item {
|
||
flex: 1;
|
||
|
||
&__wrapper {
|
||
display: flex;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: transform 0.3s;
|
||
flex: 1;
|
||
|
||
&__image {
|
||
flex: 1;
|
||
}
|
||
|
||
&__video {
|
||
flex: 1;
|
||
}
|
||
|
||
&__title {
|
||
position: absolute;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
font-size: 28rpx;
|
||
padding: 12rpx 24rpx;
|
||
color: #FFFFFF;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__indicator {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.video-swiper-indicator {
|
||
&__wrapper {
|
||
display: flex;
|
||
.video-swiper-indicator_dot{
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 100px;
|
||
margin: 0 4px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.video-swiper-indicator_active{
|
||
width: 12px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<!--
|
||
// test.vue 调用案例
|
||
<template>
|
||
<view>
|
||
<VideoSwiper
|
||
:list="list"
|
||
keyName="url"
|
||
:autoplay="false">
|
||
</VideoSwiper>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import VideoSwiper from "./video-swiper.vue"
|
||
export default {
|
||
components: {
|
||
"VideoSwiper":VideoSwiper
|
||
},
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
|
||
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
|
||
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||
type:'video'
|
||
},
|
||
{
|
||
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||
},{
|
||
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||
},
|
||
],
|
||
}
|
||
},
|
||
}
|
||
</script> -->
|