fix(mini): 活动页改为flex+ScrollView结构,tab区背景与资讯页一致

根因:资讯页tab区看似不透明是因为.ct容器有渐变背景且tab在ScrollView之外(固定区),内容不会滚到tab后面。活动页是页面级滚动+sticky tab,透明后卡片图片透过来。

修复:
1. 活动页改为与资讯页相同的 flex+ScrollView 结构
2. .events 容器加渐变背景 height:100vh overflow:hidden
3. PageHeader+倒计时横幅+tab区 在固定区,内容在 ScrollView 内独立滚动
4. .ev-tabs 从 sticky 改为 static,背景 transparent
5. 移除 tabsTop 测量逻辑(不再需要吸顶)
6. 加 disableScroll:true(ScrollView独立滚动)
This commit is contained in:
Pine
2026-09-01 23:33:23 +08:00
parent c6772a28e2
commit 8d2f3aed08
3 changed files with 33 additions and 37 deletions
@@ -1 +1 @@
export default { navigationBarTitleText: '活动', navigationStyle: 'custom' };
export default { navigationBarTitleText: '活动', navigationStyle: 'custom', disableScroll: true };
+22 -28
View File
@@ -1,4 +1,4 @@
import { View, Text, Button, Image } from '@tarojs/components';
import { View, Text, Button, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { getBookableEvents, fmtEvt, priceText } from '@/utils/booking';
@@ -39,16 +39,6 @@ export default function Booking() {
const [filter, setFilter] = useState('all');
const [err, setErr] = useState('');
const [loaded, setLoaded] = useState(false);
const [tabsTop, setTabsTop] = useState(0);
// tabs 吸顶位置 = 固定标题区实测高度(滚动到顶时 tabs 悬浮在标题区正下方)
useEffect(() => {
Taro.nextTick(() => {
Taro.createSelectorQuery()
.select('.page-navbar')
.boundingClientRect((r) => { if (r && r.height) setTabsTop(r.height); })
.exec();
});
}, []);
useEffect(() => {
Promise.all([
@@ -118,29 +108,33 @@ export default function Booking() {
</View>
</View>
{/* 筛选 tab */}
<View className="ev-tabs" style={{ top: `${tabsTop}px` }}>
{/* 筛选 tab(固定区,与资讯页一致) */}
<View className="ev-tabs">
{FILTERS.map((f) => (
<Text key={f.key} className={`ev-tab${filter === f.key ? ' on' : ''}`} onClick={() => setFilter(f.key)}>{f.label}</Text>
))}
</View>
{/* 双列海报瀑布流 */}
<View className="ev-grid">
{!loaded && Array.from({ length: 4 }).map((_, i) => (
<View className="cell" key={i}>
<Skeleton.Box h={280} />
<View className="cell-body">
<Skeleton.Line w="70%" h={16} />
<Skeleton.Line w="100%" h={12} style={{ marginTop: 10 }} />
<Skeleton.Line w="45%" h={12} style={{ marginTop: 8 }} />
{/* 内容独立滚动 */}
<ScrollView className="ev-scroll" scrollY enhanced showScrollbar={false}>
{/* 双列海报瀑布流 */}
<View className="ev-grid">
{!loaded && Array.from({ length: 4 }).map((_, i) => (
<View className="cell" key={i}>
<Skeleton.Box h={280} />
<View className="cell-body">
<Skeleton.Line w="70%" h={16} />
<Skeleton.Line w="100%" h={12} style={{ marginTop: 10 }} />
<Skeleton.Line w="45%" h={12} style={{ marginTop: 8 }} />
</View>
</View>
</View>
))}
{loaded && filtered.map((e) => renderCard(e))}
</View>
{loaded && filtered.length === 0 && !err && <Text className="muted bk-empty">暂无该类型活动切换筛选看看</Text>}
{err && <Text className="err-text">{err}</Text>}
))}
{loaded && filtered.map((e) => renderCard(e))}
</View>
{loaded && filtered.length === 0 && !err && <Text className="muted bk-empty">暂无该类型活动切换筛选看看</Text>}
{err && <Text className="err-text">{err}</Text>}
<View className="ev-scroll-pad" />
</ScrollView>
</View>
);
}
+10 -8
View File
@@ -1,11 +1,15 @@
/* 活动列表 · 小程序样式(双列海报瀑布流 · 参考活动平台布局) */
.events {
padding: 24rpx 24rpx 180rpx;
display: flex; flex-direction: column;
height: 100vh; overflow: hidden;
padding: 0 24rpx;
box-sizing: border-box;
position: relative; z-index: 2;
background: linear-gradient(165deg, #edf2ff 0%, #f6eefc 34%, #ecf7f6 68%, #eaf4ff 100%);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.events { padding-bottom: calc(180rpx + env(safe-area-inset-bottom)); }
}
/* 内容区独立滚动(页头+倒计时+tab固定) */
.ev-scroll { flex: 1 1 0; height: 0; min-height: 0; }
.ev-scroll-pad { height: 200rpx; }
/* 区块头 */
.ev-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6rpx; margin: 32rpx 0 20rpx; padding: 0 8rpx; }
@@ -13,7 +17,7 @@
.ev-title { font-size: 40rpx; font-weight: 800; letter-spacing: -0.5rpx; line-height: 1.3; background: linear-gradient(120deg, #8fc3ff 0%, #a8a0ff 45%, #e0a0ff 80%, #7fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-en { font-family: 'BubbledotICG', monospace; color: #5b5b5b; font-size: 24rpx; letter-spacing: 2rpx; }
/* 筛选 tab吸顶:透明背景,与资讯页一致,页面渐变背景透出) */
/* 筛选 tab固定区,与资讯页一致:透明背景,页面渐变背景透出) */
.ev-tabs {
display: flex;
flex-wrap: nowrap; /* 单行横滑,绝不换行 */
@@ -23,9 +27,7 @@
gap: 12rpx;
padding: 18rpx 0 16rpx;
margin-top: 0;
position: sticky;
top: 0; /* 运行时由内联 style 覆盖为标题区实测高度 */
z-index: 3;
flex-shrink: 0;
background: transparent;
}
.ev-tab {