From f3d18d3413b2d5f90457588017e1c535a06e4d26 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期二, 01 四月 2025 18:00:22 +0800
Subject: [PATCH] 优化头部标签卡
---
src/layouts/components/HeaderNav.vue | 29 +++++++++++++++++++++++++++--
1 files changed, 27 insertions(+), 2 deletions(-)
diff --git a/src/layouts/components/HeaderNav.vue b/src/layouts/components/HeaderNav.vue
index 6822bff..d88ea34 100644
--- a/src/layouts/components/HeaderNav.vue
+++ b/src/layouts/components/HeaderNav.vue
@@ -6,7 +6,7 @@
<!-- 折叠 -->
<i @click="clickFold" class="el-icon-s-fold"></i>
<!-- 标签列表 -->
- <div class="tag-list-container">
+ <div class="tag-list-container" @wheel.prevent="handleWheel">
<div class="tag-list" v-for="tag in tagList" :key="tag.name">
<div @click="goTag(tag)" :class="{ 'activeTag': tag.path === $route.path }">
{{ tag.meta.title }}
@@ -34,6 +34,8 @@
data() {
return {
userInfo: '',
+ scrollTimer: null,
+ scrollAmount: 0
}
},
computed: {
@@ -72,6 +74,23 @@
// 跳转标签
goTag(tag) {
this.$router.push(tag.path)
+ },
+ handleWheel(e) {
+ if (this.scrollTimer) {
+ this.scrollAmount += e.deltaY;
+ return;
+ }
+
+ const container = e.currentTarget;
+ this.scrollAmount = e.deltaY;
+
+ const scroll = () => {
+ container.scrollLeft += this.scrollAmount * 1.2; // 增加滚动速度
+ this.scrollAmount = 0;
+ this.scrollTimer = null;
+ };
+
+ this.scrollTimer = setTimeout(scroll, 8); // 减少延迟时间
}
},
}
@@ -86,13 +105,15 @@
display: flex;
align-items: center;
justify-content: space-between;
+ overflow: hidden;
.user-logininfo-icon {
margin-right: 30px;
flex: 1;
- flex-shrink: 0;
display: flex;
align-items: center;
+ min-width: 0;
+ overflow: hidden;
i:first-child {
margin-right: 21px;
@@ -106,6 +127,10 @@
display: flex;
align-items: center;
overflow-x: auto;
+ flex: 1;
+ min-width: 0;
+ scroll-behavior: auto; // 移除平滑滚动，提高性能
+ -webkit-overflow-scrolling: touch;
.tag-list {
flex-shrink: 0;
--
Gitblit v1.7.1