99 lines
1.8 KiB
Vue
99 lines
1.8 KiB
Vue
<template>
|
||
<!-- 产品图片轮播 + 自定义指示点 -->
|
||
<view class="detail-swiper">
|
||
<swiper
|
||
class="swiper"
|
||
:circular="true"
|
||
:indicator-dots="false"
|
||
:current="current"
|
||
@change="onChange"
|
||
>
|
||
<swiper-item v-for="(item, index) in images" :key="index">
|
||
<view class="swiper-item">
|
||
<image class="swiper-image" :src="item" mode="aspectFill"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 自定义指示点：active 16x8 橙色胶囊，inactive 8x8 黑色 20% -->
|
||
<view class="dots">
|
||
<view
|
||
v-for="(item, index) in images"
|
||
:key="index"
|
||
class="dot"
|
||
:class="{ active: current === index }"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DetailSwiper',
|
||
props: {
|
||
images: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
current: 0
|
||
}
|
||
},
|
||
watch: {
|
||
images() {
|
||
// 切换图片数组时重置指示点到第一张
|
||
this.current = 0
|
||
}
|
||
},
|
||
methods: {
|
||
onChange(e) {
|
||
this.current = e.detail.current
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.detail-swiper {
|
||
position: relative;
|
||
width: 100%;
|
||
background: #f2f2f2;
|
||
}
|
||
.swiper {
|
||
width: 100%;
|
||
height: 500rpx; /* 260px */
|
||
}
|
||
.swiper-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.swiper-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 指示点：覆盖在图片底部 */
|
||
.dots {
|
||
position: absolute;
|
||
bottom: 20rpx; /* 距图片底部 10px */
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx; /* 6px */
|
||
}
|
||
.dot {
|
||
width: 16rpx; /* 8px */
|
||
height: 16rpx;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 8rpx; /* 4px */
|
||
}
|
||
.dot.active {
|
||
width: 32rpx; /* 16px */
|
||
height: 16rpx; /* 8px */
|
||
background: #ff6800;
|
||
}
|
||
</style>
|