From d635b51ae0ffe922d7e56bbceb7229fe7a5fd8f2 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期四, 10 四月 2025 10:25:29 +0800
Subject: [PATCH] feat
---
src/layouts/components/HeaderNav.vue | 32 +++++++++++++++++++++++++++++---
1 files changed, 29 insertions(+), 3 deletions(-)
diff --git a/src/layouts/components/HeaderNav.vue b/src/layouts/components/HeaderNav.vue
index c7e9896..d88ea34 100644
--- a/src/layouts/components/HeaderNav.vue
+++ b/src/layouts/components/HeaderNav.vue
@@ -4,9 +4,9 @@
<div class="user-logininfo">
<div class="user-logininfo-icon">
<!-- 折叠 -->
- <!-- <i @click="clickFold" class="el-icon-s-fold"></i> -->
+ <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,12 +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;
@@ -105,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