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:
@@ -1 +1 @@
|
||||
export default { navigationBarTitleText: '活动', navigationStyle: 'custom' };
|
||||
export default { navigationBarTitleText: '活动', navigationStyle: 'custom', disableScroll: true };
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user