109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
<template>
|
||
<!-- 产品图片轮播 + 自定义指示点
|
||
UI 尺寸固定：宽100% × 高500rpx，仅通过 mode 控制图片完整显示 -->
|
||
<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">
|
||
<!-- aspectFit：图片保持原始比例完整显示；
|
||
图片宽高 100% 保证以容器为基准缩放；
|
||
比例不匹配时短边留白，容器背景灰 -->
|
||
<image class="swiper-image" :src="item" mode="aspectFit"></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; /* UI 定死：260px，不再改动 */
|
||
}
|
||
.swiper-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f2f2f2;
|
||
}
|
||
/* 图片：完整显示，保持比例，自动缩放适应容器
|
||
aspectFit + 100% 宽高 = 图片自动等比缩放到能完整放入 100%*500rpx 的容器 */
|
||
.swiper-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 指示点：覆盖在图片底部 */
|
||
.dots {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
.dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 8rpx;
|
||
}
|
||
.dot.active {
|
||
width: 32rpx;
|
||
height: 16rpx;
|
||
background: #ff6800;
|
||
}
|
||
</style>
|