88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
|
<view class="slider-banner product-bg">
|
|
<swiper autoplay interval="2000" class="swiper-wrapper" @change="handleChange" v-if="imgUrls.length > 0" :indicator-dots='true' indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#ffffff">
|
|
<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
|
|
<swiper-item>
|
|
<image v-if="!checkIfVideo(item)" :src="item" class="slide-image" />
|
|
<video v-else class="slide-image" @play="storePlayObj" :show-fullscreen-btn="false" :src="item" :id="buildId(imgUrlsIndex)" autoplay controls></video>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
<!-- <swiper class="swiper-wrapper" :options="ProductConSwiper" v-if="imgUrls.length > 0">
|
|
<swiperSlide class="swiper-slide" v-for="item in imgUrls" :key="item" ref="goodSwiper">
|
|
<image :src="item" class="slide-image" />
|
|
</swiperSlide>
|
|
</swiper>-->
|
|
<!-- <view class="pages">{{ currents || 1 }}/{{ imgUrls.length || 1 }}</view> -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
// import { swiper, swiperSlide } from "vue-awesome-swiper";
|
|
|
|
export default {
|
|
name: "ProductConSwiper",
|
|
components: {
|
|
// swiper,
|
|
// swiperSlide
|
|
},
|
|
props: {
|
|
imgUrls: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data: function() {
|
|
let that = this;
|
|
return {
|
|
currents: 1,
|
|
currentVideo:null,
|
|
ProductConSwiper: {
|
|
autoplay: {
|
|
disableOnInteraction: true,
|
|
delay: 2000
|
|
},
|
|
loop: true,
|
|
speed: 1000,
|
|
observer: true,
|
|
observeParents: true,
|
|
on: {
|
|
slideChangeTransitionStart: function() {
|
|
that.currents = this.realIndex + 1;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
mounted: function() {},
|
|
methods: {
|
|
buildId(idx){
|
|
return 'myVideo'+idx;
|
|
},
|
|
checkIfVideo(url){
|
|
if(url.indexOf('.') != -1){
|
|
var ext = url.substring(url.lastIndexOf('.')+1);
|
|
if (['mp4','webm','mpeg4','ogg'].indexOf(ext) != -1) {
|
|
return true;
|
|
} else{
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
storePlayObj(event){
|
|
console.log(event);
|
|
this.currentVideo = uni.createVideoContext(event.currentTarget.id,this);
|
|
},
|
|
handleChange(event) {
|
|
this.currents = event.mp.detail.current + 1;
|
|
|
|
//切换时停止播放
|
|
if (this.currentVideo) {
|
|
this.currentVideo.pause();
|
|
}
|
|
// var itemName = 'myVideo'+event.mp.detail.current;
|
|
// uni.createVideoContext(itemName,this).stop();
|
|
}
|
|
}
|
|
};
|
|
</script>
|