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.
71 lines
1.7 KiB
71 lines
1.7 KiB
<template> |
|
<view class="slider-banner product-bg"> |
|
<swiper |
|
class="swiper-wrapper" |
|
@change="handleChange" |
|
v-if="imgUrls.length > 0" |
|
> |
|
<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex"> |
|
<swiper-item> |
|
<image :src="item" @tap="previewImage(imgUrlsIndex)" mode="aspectFit" 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 || 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, |
|
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>
|
|
|