feat: 详情页轮播

This commit is contained in:
zoujing
2026-09-17 11:05:53 +08:00
parent d4790ba82c
commit d2dab27afa

View File

@@ -142,12 +142,24 @@ onShareAppMessage(() => ({
</view>
</view>
<!-- 头图 -->
<!-- 头图多图自动轮播2 张才启用点击任意位置预览大图
点击必须绑在**最外层容器**不能只绑 <image>上下两条 scrim 渐隐层与
指示点都是绝对定位的 <view>会吃掉落在图片上的 tap只绑 image 的话
只有中段一条窄带能点开预览tap 默认冒泡所以只在最外层绑一次即可
image 上不要再绑否则会连触两次 -->
<view class="relative overflow-hidden bg-[#0E4432]">
<view class="relative h-[316px]">
<swiper class="w-full h-[316px] bg-[#0E4432]" :current="current" :circular="images.length > 1" @change="onSwiperChange">
<view class="relative h-[316px]" @click="onPreview(current)">
<swiper
class="w-full h-[316px] bg-[#0E4432]"
:current="current"
:circular="images.length > 1"
:autoplay="images.length > 1"
:interval="3500"
:duration="500"
@change="onSwiperChange"
>
<swiper-item v-for="(url, i) in images" :key="i">
<image class="block w-full h-[316px]" :src="url" mode="aspectFill" @click="onPreview(i)" />
<image class="block w-full h-[316px]" :src="url" mode="aspectFill" />
</swiper-item>
</swiper>