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

54
src/views/Home.vue
View File

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