From 5ce0d76154bf4c1d70543476cdfad9a30195b0f8 Mon Sep 17 00:00:00 2001
From: shinnosuke <tantao@1hoper.com>
Date: 星期六, 10 十月 2026 16:44:38 +0800
Subject: [PATCH] fix(miniapp): 调整首页圆角布局并隐藏滚动条
---
rencaika/pages/food-benefits/food-benefits.uvue | 19 ++++++++++++++++---
1 files changed, 16 insertions(+), 3 deletions(-)
diff --git a/rencaika/pages/food-benefits/food-benefits.uvue b/rencaika/pages/food-benefits/food-benefits.uvue
index 1bf2d78..1b55d5e 100644
--- a/rencaika/pages/food-benefits/food-benefits.uvue
+++ b/rencaika/pages/food-benefits/food-benefits.uvue
@@ -10,9 +10,15 @@
</view>
</view>
- <scroll-view class="page-scroll" scroll-y lower-threshold="80" @scroll="handlePageScroll" @scrolltolower="loadMoreMerchants">
+ <scroll-view :show-scrollbar="false" 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>
@@ -70,7 +76,7 @@
const activeIndex = ref(-1)
const windowWidth = ref(375)
const thumbScrollLeft = ref(0)
- const fallbackFoodImage = '/static/food-assets/food-1.jpg'
+ const fallbackFoodImage = '/static/common/image-placeholder.png'
const topicDescription = ref('')
const gallery = ref<any[]>([])
@@ -174,6 +180,12 @@
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
@@ -265,6 +277,7 @@
.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%); }
--
Gitblit v1.7.1