feat: add collapsible welcome and sticky tabs
Wrap the home welcome component in a collapsible container with smooth transitions. Implement scroll-based collapse and expand logic for the banner in the chat main list. Add sticky tab header styling and updated page layout for the discovery page.
This commit is contained in:
@@ -27,9 +27,12 @@
|
||||
</view>
|
||||
|
||||
<scroll-view v-show="tabIndex === 0" class="main-scroll-area flex flex-col flex-full overflow-hidden" scroll-y
|
||||
@scroll="handleDiscoveryScroll"
|
||||
@touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
|
||||
@touchmove="handleScrollAreaTouchMove">
|
||||
<HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
|
||||
<view class="home-welcome-collapse" :class="{ 'is-collapsed': isHomeWelcomeCollapsed }">
|
||||
<HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
|
||||
</view>
|
||||
|
||||
<Discovery />
|
||||
</scroll-view>
|
||||
@@ -227,6 +230,12 @@ const isKeyboardShow = ref(false);
|
||||
|
||||
///(控制滚动位置)
|
||||
const scrollTop = ref(99999);
|
||||
const discoveryScrollTop = ref(0);
|
||||
const lastDiscoveryScrollTop = ref(0);
|
||||
const isHomeWelcomeCollapsed = ref(false);
|
||||
const DISCOVERY_WELCOME_COLLAPSE_TOP = 12;
|
||||
const DISCOVERY_WELCOME_EXPAND_TOP = 4;
|
||||
const DISCOVERY_SCROLL_DELTA = 2;
|
||||
|
||||
/// 会话列表
|
||||
const chatMsgList = ref([]);
|
||||
@@ -381,6 +390,27 @@ const handleScrollAreaTouchMove = () => {
|
||||
};
|
||||
|
||||
// 处理用户滚动事件
|
||||
const handleDiscoveryScroll = (e) => {
|
||||
if (Date.now() - lastScrollTouchAt < 1000) {
|
||||
hideKeyboardByScroll();
|
||||
}
|
||||
|
||||
const currentScrollTop = Number(e.detail?.scrollTop || 0);
|
||||
const scrollDelta = currentScrollTop - lastDiscoveryScrollTop.value;
|
||||
discoveryScrollTop.value = currentScrollTop;
|
||||
|
||||
if (currentScrollTop <= DISCOVERY_WELCOME_EXPAND_TOP) {
|
||||
isHomeWelcomeCollapsed.value = false;
|
||||
} else if (
|
||||
currentScrollTop > DISCOVERY_WELCOME_COLLAPSE_TOP ||
|
||||
scrollDelta > DISCOVERY_SCROLL_DELTA
|
||||
) {
|
||||
isHomeWelcomeCollapsed.value = true;
|
||||
}
|
||||
|
||||
lastDiscoveryScrollTop.value = currentScrollTop;
|
||||
};
|
||||
|
||||
const welcomeHeight = ref(0);
|
||||
let lastScrollTop = 0;
|
||||
const handleScroll = (e) => {
|
||||
|
||||
@@ -5,6 +5,25 @@
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.home-welcome-collapse {
|
||||
width: 100%;
|
||||
height: 92px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition:
|
||||
height 240ms ease,
|
||||
opacity 240ms ease,
|
||||
transform 240ms ease;
|
||||
}
|
||||
|
||||
.home-welcome-collapse.is-collapsed {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
height: 136px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="flex flex-col h-full overflow-hidden min-height-0">
|
||||
<view class="flex-shrink-0">
|
||||
<view class="discovery-content">
|
||||
<view class="discovery-tabs-sticky">
|
||||
<FindTabs v-if="discoveryTabs.length > 0" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
|
||||
</view>
|
||||
|
||||
@@ -206,4 +206,18 @@ onMounted(() => {
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.discovery-content {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: $theme-color-50;
|
||||
}
|
||||
|
||||
.discovery-tabs-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 12;
|
||||
width: 100%;
|
||||
background: $theme-color-50;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user