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.
shop-app/pages/goods/detail/components/SlideImage.vue

108 lines
1.8 KiB

<template>
<!-- 商品图片 -->
<view class="images-swiper">
<swiper class="swiper-box" :autoplay="autoplay" :duration="duration"
:indicator-dots="indicatorDots" :interval="interval" :circular="true"
@change="setCurrent">
<!-- 轮播图片 -->
<swiper-item v-for="(item, index) in images" :key="index"
@click="onPreviewImages(index)" >
<view class="slide-image">
<image class="image" :draggable="false" :src="item"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
props: {
// 图片轮播
images: {
type: Array,
default: [],
},
},
data() {
return {
indicatorDots: true, // 是否显示面板指示点
autoplay: true, // 是否自动切换
interval: 4000, // 自动切换时间间隔
duration: 800, // 滑动动画时长
currentIndex: 1, // 轮播图指针
};
},
methods: {
// 设置轮播图当前指针 数字
setCurrent({ detail }) {
this.currentIndex = detail.current + 1;
},
// 浏览商品图片
onPreviewImages(index) {
uni.previewImage({
current: index,
urls: this.images,
});
},
},
};
</script>
<style lang="scss" scoped>
// swiper组件
.images-swiper {
position: relative;
}
.swiper-box {
width: 100%;
height: 100vw;
/* #ifdef H5 */
max-width: 480px;
max-height: 480px;
margin: 0 auto;
/* #endif */
// 主图视频
.slide-video {
width: 100%;
height: 100%;
.video {
display: block;
width: 100%;
height: 100%;
}
}
// 图片轮播
.slide-image {
position: relative;
width: 100%;
height: 100%;
.image {
display: block;
width: 100%;
height: 100%;
}
}
}
// swiper计数
.swiper-count {
position: absolute;
right: 36rpx;
bottom: 72rpx;
padding: 2rpx 18rpx;
background: rgba(0, 0, 0, 0.363);
border-radius: 50rpx;
color: $color-grey0;
font-size: 26rpx;
}
</style>