Ivan/xtraderClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：分类栏滑动效果优化

Browse Source
This commit is contained in:
ivan 2026-02-13 20:30:27 +08:00
parent 0e8d19db0c
commit c1e56cc07f
1 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/Home.vue
View File

@ -1,8 +1,7 @@
<template>
<div class="home-page">
<!-- 分类置顶、全宽无左右留白 -->
<div v-if="categoryLayers.length > 0" class="home-category-wrap">
<!-- 第一层：纯文字 tabs -->
<!-- 第一层：置顶、全宽，始终可见 -->
<div v-if="categoryLayers.length > 0" class="home-category-layer1-wrap">
<div class="home-category-layer home-category-layer--text">
<v-tabs
:model-value="layerActiveValues[0]"
@ -14,8 +13,11 @@
</v-tab>
</v-tabs>
</div>
<!-- 第二层：带图标的横向选项（icon 在上，文字在下） -->
<div v-if="categoryLayers.length >= 2" class="home-category-layer home-category-layer--icon">
</div>
<v-container fluid class="home-container">
<!-- 第二三层：随内容滚动，回顶部时与列表第一行一起出现 -->
<div v-if="categoryLayers.length >= 2" class="home-category-layers-23-scroll">
<div class="home-category-layer home-category-layer--icon">
<div class="home-category-icon-row">
<button
v-for="item in categoryLayers[1]"
@ -31,7 +33,6 @@
</button>
</div>
</div>
<!-- 第三层：标题 + 搜索/筛选 + 文字 tabs -->
<div v-if="categoryLayers.length >= 3" class="home-category-layer home-category-layer--third">
<div class="home-category-third-header">
<h3 class="home-category-third-title">{{ selectedLayer0SectionTitle }}</h3>
@ -55,7 +56,6 @@
</v-tabs>
</div>
</div>
<v-container fluid class="home-container">
<!-- 可滚动容器作为 v-pull-to-refresh 的父元素，组件据此判断 scrollTop 仅在顶部时才响应下拉 -->
<div ref="scrollRef" class="home-list-scroll">
<v-pull-to-refresh class="pull-to-refresh" @load="onRefresh">
@ -500,7 +500,6 @@ onUnmounted(() => {
max-width: 2560px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
.home-header {
@ -612,15 +611,11 @@ onUnmounted(() => {
margin-top: 40px;
}
/* 分类置顶、全宽（突破父级 padding，左右无留白） */
.home-category-wrap {
/* 第一层：置顶、全宽 */
.home-category-layer1-wrap {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
padding-right: 0;
position: sticky;
top: 64px;
z-index: 10;
@ -628,6 +623,15 @@ onUnmounted(() => {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 第二三层：随内容滚动，全宽 */
.home-category-layers-23-scroll {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: 0;
background-color: white;
}
.home-category-layer {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}