| | |
|---|
| | | |
|---|
| | | <scroll-view class="page-scroll" scroll-y lower-threshold="80" @scroll="handlePageScroll" @scrolltolower="loadMoreMerchants"> |
|---|
| | | <view class="hero"> |
|---|
| | | <image class="hero-image" :src="currentImage" mode="aspectFill" @error="replaceTopicImage"></image> |
|---|
| | | <!-- 主图跟着图册左右滑：滑动的主图与下方缩略图互相联动（点缩略图 = 主图滑过去）。 --> |
|---|
| | | <swiper v-if="gallery.length > 0" class="hero-swiper" :current="activeIndex < 0 ? 0 : activeIndex" :circular="gallery.length > 1" :duration="240" @change="handleHeroChange"> |
|---|
| | | <swiper-item v-for="(item, index) in gallery" :key="item.id"> |
|---|
| | | <image class="hero-image" :src="item.image" mode="aspectFill" @error="replaceGalleryImage(index)"></image> |
|---|
| | | </swiper-item> |
|---|
| | | </swiper> |
|---|
| | | <image v-else class="hero-image" :src="currentImage" mode="aspectFill" @error="replaceTopicImage"></image> |
|---|
| | | <view class="hero-top-shade"></view> |
|---|
| | | <view class="hero-bottom-shade"></view> |
|---|
| | | |
|---|
| | |
|---|
| | | if (index >= gallery.value.length) index = gallery.value.length - 1 |
|---|
| | | selectGallery(index) |
|---|
| | | } |
|---|
| | | /** 主图左右滑动：滑动落点同步到缩略图、菜名和描述卡。 */ |
|---|
| | | const handleHeroChange = (event: any) => { |
|---|
| | | const current = event != null && event.detail != null && event.detail.current != null ? Number(event.detail.current) : -1 |
|---|
| | | if (current < 0) return |
|---|
| | | selectGallery(current) |
|---|
| | | } |
|---|
| | | const handlePageScroll = (event: any) => { |
|---|
| | | const shouldShow = event.detail.scrollTop > 64 |
|---|
| | | if (isSolidNav.value != shouldShow) isSolidNav.value = shouldShow |
|---|
| | |
|---|
| | | .page { width: 100%; height: 100vh; background-color: #FFFFFF; } |
|---|
| | | .page-scroll { width: 100%; height: 100vh; background-color: #FFFFFF; } |
|---|
| | | .hero { height: 730rpx; position: relative; z-index: 2; overflow: visible; background-color: #332F29; } |
|---|
| | | .hero-swiper { position: absolute; left: 0; top: 0; width: 100%; height: 730rpx; } |
|---|
| | | .hero-image { position: absolute; left: 0; top: 0; width: 100%; height: 730rpx; } |
|---|
| | | .hero-top-shade { position: absolute; left: 0; right: 0; top: 0; height: 230rpx; background-image: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 65%, rgba(0,0,0,0) 100%); } |
|---|
| | | .hero-bottom-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 230rpx; background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); } |
|---|
