feat: 详情页轮播
This commit is contained in:
1 parent
d4790ba82c
commit
d2dab27afa
1 file changed
+16
-4
@@ -142,12 +142,24 @@ onShareAppMessage(() => ({
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 头图 -->
|
<!-- 头图:多图自动轮播(≥2 张才启用),点击任意位置预览大图。
|
||||||
|
⚠️ 点击必须绑在**最外层容器**上,不能只绑 <image>:上下两条 scrim 渐隐层与
|
||||||
|
指示点都是绝对定位的 <view>,会吃掉落在图片上的 tap,只绑 image 的话
|
||||||
|
只有中段一条窄带能点开预览。tap 默认冒泡,所以只在最外层绑一次即可
|
||||||
|
(image 上不要再绑,否则会连触两次)。 -->
|
||||||
<view class="relative overflow-hidden bg-[#0E4432]">
|
<view class="relative overflow-hidden bg-[#0E4432]">
|
||||||
<view class="relative h-[316px]">
|
<view class="relative h-[316px]" @click="onPreview(current)">
|
||||||
<swiper class="w-full h-[316px] bg-[#0E4432]" :current="current" :circular="images.length > 1" @change="onSwiperChange">
|
<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">
|
<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-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user