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.
77 lines
1.9 KiB
77 lines
1.9 KiB
<template>
|
|
<view class="slider-banner product-bg">
|
|
<swiper class="swiper-wrapper" @change="handleChange" v-if="imgUrls.length > 0">
|
|
<block v-for="(item, videoUrlsIndex) in videoUrls" :key="videoUrlsIndex">
|
|
<swiper-item>
|
|
<video :src="item" play-btn-position="center" enable-play-gesture loop autoplay :controls="true" class="slide-image" />
|
|
</swiper-item>
|
|
</block>
|
|
<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
|
|
<swiper-item>
|
|
<image :src="item" @tap="previewImage(imgUrlsIndex + videoUrls.length)" class="slide-image" />
|
|
</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 + videoUrls.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: () => [],
|
|
},
|
|
videoUrls: {
|
|
type: Array,
|
|
default: () => [],
|
|
}
|
|
},
|
|
data: function() {
|
|
let that = this;
|
|
return {
|
|
currents: 1,
|
|
ProductConSwiper: {
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
delay: 2000,
|
|
},
|
|
loop: true,
|
|
speed: 1000,
|
|
observer: true,
|
|
observeParents: true,
|
|
on: {
|
|
slideChangeTransitionStart: function() {
|
|
that.currents = this.realIndex + 1;
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
mounted: function() {},
|
|
methods: {
|
|
handleChange(event) {
|
|
this.currents = event.mp.detail.current + 1;
|
|
},
|
|
previewImage(current) {
|
|
uni.previewImage({
|
|
current,
|
|
urls: this.imgUrls,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|