Actualización 2023.2.7
Este enfoque tiene muchos defectos. Hay otras soluciones mejores, que se han actualizado en el nuevo artículo. Los amigos interesados pueden ir al nuevo artículo para leer↓
Este es un efecto de guión bajo realizado con Vue, no se utilizan otros complementos.
Tabla de contenido
1.Haz una barra de navegación inicial
Este es el efecto final ↓
Al principio, revisé las prácticas de otras personas en Internet, y la mayoría de ellas se realizaron utilizando el borde inferior, o el método de pseudo elemento + borde.
Si simplemente usa el borde, la longitud del borde cambia según la longitud del contenido de la opción, lo cual no es particularmente bueno. Aunque se puede resolver escribiendo un borde en un pseudoelemento, creo que hay una desventaja en Al hacerlo, es decir, la línea del borde no se puede establecer con esquinas redondeadas, por lo que la estética será un poco...
Volviendo al tema, me di cuenta así↓
1.Haz una barra de navegación inicial
<body>
<div id="app">
<div class="nav">
<!-- 标题列表 -->
<div class="nav-list">
<div v-for="(item, index) in navList" :key="index">{
{ item }}</div>
</div>
<!-- 下划线 -->
<div class="nav-line"></div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
navList: ["首页", "头条", "特惠", "财经", "动漫"],
},
});
</script>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.nav {
position: relative;
}
.nav-list {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-line {
width: 18px;
height: 4px;
border-radius: 2px;
background-color: red;
position: absolute;
bottom: 0;
}
</style>El efecto que se muestra arriba es este
2. Agregar estilo de clic
En primer lugar, debemos agregar un evento de clic a cada opción en la navegación y luego hacer que el elemento en el que se hizo clic cambie de color cuando se haga clic.
- Agregar evento y clase dinámica en la parte HTML
<div class="nav-list">
<div v-for="(item, index) in navList" :key="index" @click="click(index)" :class="{ active : index==current }">{
{ item }}</div>
</div>- Agregar variables y métodos a instancias de Vue
data: {
navList: ["首页", "头条", "特惠", "财经", "动漫"],
current: 0,
},
methods: {
// 点击时执行
click(index) {
this.current = index;
this.lineMove();
},
// 计算下划线应该移动的距离
lineMove() {
},
},- Agregar estilo a la parte CSS
.active {
color: red;
font-weight: bold;
}Entonces obtenemos algo como esto
Después de completar los dos primeros pasos, el color de la fuente ha cambiado. A continuación, deje que el subrayado se mueva con él.
3. Subrayar el movimiento
- Agregue estilo dinámico para subrayar en la parte HTML
Debido a que el posicionamiento absoluto se agregó anteriormente al subrayado, aquí puede usar la propiedad izquierda para el desplazamiento.
<div class="nav-line" :style="{left:X+'px',transform : 'translateX(-50%)'}"></div>Por supuesto, tampoco puedes usar left y solo usar TranslateX() que cambia el atributo transform para lograr el mismo efecto↓
<!-- 只使用transform的写法 -->
<div class="nav-line" :style="{transform : `translateX(${X}px) translateX(-50%)`}"></div>Tenga en cuenta que TranslateX() debe estar entre comillas " " o una cadena de plantilla ``; de lo contrario, se informará un error. TranslateX(-50%) mueve el subrayado hacia la izquierda un 50% de sí mismo para garantizar la alineación. Todos deberían entender esto
- Agregue la variable X y el método lineMove en la instancia de Vue
data: {
navList: ["首页", "头条", "特惠", "财经", "动漫"],
X: 0,
current: 0,
},
methods: {
// 点击时执行
click(index) {
this.current = index;
this.lineMove();
},
// 计算下划线应该移动的距离
lineMove() {
// 导航栏的宽度,因为是100%所以就是屏幕宽度
let width = document.body.clientWidth;
// 每个选项栏的宽度 = 导航栏宽度/选项个数
let divWidth = width / this.navList.length;
// 半个选项栏宽度
let halfDivWidth = divWidth / 2;
// 下划线移动的距离 = 半个选项栏宽度 + (单个选项栏宽度*当前index)
this.X = halfDivWidth + divWidth * this.current;
},
}, Aquí dejemos que ancho = el ancho de .nav-list, porque antes definimos el ancho de .nav-list como 100% en CSS, por lo que obtuve el ancho de pantalla actual en el ejemplo.
- CSS agrega efecto de transición para subrayar
.nav-line {
width: 18px;
height: 4px;
border-radius: 2px;
background-color: red;
position: absolute;
bottom: 0;
transition: 0.3s all;
}obtener el efecto
Después de hacer esto, puede ver que el efecto se ha logrado, pero todavía hay un pequeño problema: la posición del subrayado es incorrecta cuando se inicializa la página, está en el lado izquierdo de la pantalla y la mitad de ella desborda la pantalla. La razón también es obvia: el valor inicial que establecemos para la variable X es 0.
Resuelva el problema: ejecute el método lineMove una vez en el ciclo de vida creado
created() {
// 避免页面初始化会有显示问题，初始加载时就执行一次该方法
this.lineMove();
},Nota: Se recomienda ejecutar en el ciclo creado, no en el ciclo montado, porque montado se ejecuta después de que se completa la carga inicial de la página, por lo que cuando se ejecuta en montado, veremos que el subrayado permanece brevemente en el lado izquierdo de la pantalla al principio.
Consigue el efecto final ↓
código final
<body>
<div id="app">
<div class="nav">
<!-- 标题列表 -->
<div class="nav-list">
<div v-for="(item, index) in navList" :key="index" @click="click(index)" :class="{ active : index==current }">{
{ item }}</div>
</div>
<!-- 下划线 -->
<div class="nav-line" :style="{left:X+'px',transform : 'translateX(-50%)'}"></div>
<!-- <div class="nav-line" :style="{transform : `translateX(${X}px) translateX(-50%)`}"></div> -->
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
navList: ["首页", "头条", "特惠", "财经", "动漫"],
X: 0,
current: 0,
},
methods: {
// 点击时执行
click(index) {
this.current = index;
this.lineMove();
},
// 计算下划线应该移动的距离
lineMove() {
// 导航栏的宽度,因为是100%所以就是屏幕宽度
let width = document.body.clientWidth;
// 每个选项栏的宽度 = 导航栏宽度/选项个数
let divWidth = width / this.navList.length;
// 半个选项栏宽度
let halfDivWidth = divWidth / 2;
// 下划线移动的距离 = 半个选项栏宽度 + (单个选项栏宽度*当前index)
this.X = halfDivWidth + divWidth * this.current;
},
},
created() {
// 避免页面初始化会有显示问题，初始加载时就执行一次该方法
this.lineMove();
},
});
</script>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.nav {
position: relative;
}
.nav-list {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.active {
color: red;
font-weight: bold;
}
.nav-line {
width: 18px;
height: 4px;
border-radius: 2px;
background-color: red;
position: absolute;
bottom: 0;
transition: 0.3s all;
}
</style>Precauciones
- El estilo flexible de la barra de navegación.nav -list debe usar justify-content: space-around; de lo contrario, el cálculo posterior de la distancia de movimiento subrayado será inexacto
- Puede definir el estilo del subrayado o utilizar el atributo de imagen de fondo para hacer un subrayado degradado.
- Si el número (longitud) de las opciones en la barra de navegación es diferente, el movimiento del subrayado también será inexacto, lo mejor es unificar el número (longitud) de las opciones, o cada maestro puede resolverlo por sí mismo.
- Bienvenido a dejar un mensaje, no rocíes si no te gusta