vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
前言
在pc端和移動端的項目里面會遇見導(dǎo)航欄或者tabBar的點擊跳轉(zhuǎn),圖片和文字的高亮效果,對于小程序來說可以直接創(chuàng)建和修改圖片和文字的高亮效果,也可以使用相應(yīng)的組件庫去自定義一些效果,而在pc端和移動端的來說需要對導(dǎo)航欄或者tabBar進行一定的封裝,使其成為全局組件的使用,結(jié)合組件間的數(shù)據(jù)傳遞可以實現(xiàn)不同頁面的不同信息的展示,本篇文章介紹路由跳轉(zhuǎn)的時候,使圖片和文字的高亮效果的方法
定義基本的組件
在demo的初期,我們需要在項目的components文件夾下創(chuàng)建封裝的tabBar組件,創(chuàng)建文件myTabbar.vue,接下來需要在main.js入口文件引入注冊:
// 引入全局組件tabBar
import myTabbar from '@/components/myTabbar'
Vue.component('myTabbar', myTabbar)接下來需要我們簡單書寫myTabbar.vue的樣式結(jié)構(gòu):
<template>
<div class="tabBar">
<ul>
<li v-for="(item, index) in list" :key="index" @click="change(item.path)">
<img :src="item.selected" />
<span>{{ item.title }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
title: '首頁',
path: '/home', // 需要跳轉(zhuǎn)的地址
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
},
{
title: '分類',
path: '/demo',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
},
{
title: '購物車',
path: '/cart',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
},
{
title: '我們',
path: '/my',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
}
]
}
},
methods: {
change(path) {
this.$router.push(path) // 這種可以后退 和以下的方法選一即可
// if(this.$router.path === path) return // 無痕瀏覽
// this.$router.replace(path)
}
}
}
</script>
<style scoped>
.tabBar {
position: fixed;
width: 100%;
height: 70px;
left: 0;
bottom: 0;
display: flex;
z-index: 999;
}
.tabBar ul {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tabBar ul li {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-around;
}
.tabBar ul li img {
width: 30px;
height: 100%;
margin-bottom: 5px;
}
.tabBar ul li span {
font-size: 15px;
}
</style>
這里需要注意,圖片需要存入public文件夾的images文件夾內(nèi)部,在路由組件做好相應(yīng)的路由規(guī)則,點擊之后就可以跳轉(zhuǎn)了
文字高亮效果
圖片的高亮效果可以通過更改路徑來實現(xiàn),文字的高亮效果需要邏輯來實現(xiàn)
首先定義一個active的class樣式:
.active {
color: red;
}修改li:
<li v-for="(item, index) in list" :key="index" @click="change(item.path)">
<img :src="$route.path.includes(item.path) ? item.selected : item.active" />
<span :class="$route.path.includes(item.path) ? 'active' : ''">{{ item.title }}</span>
</li>在配置路由的入口文件的配置路由添加:
// 配置路由
export default new VueRouter({
linkActiveClass: 'active',
// linkExactActiveClass: 'active',
// 配置路由
routes: [...]
})linkActiveClass是模糊匹配linkExactActiveClass是精準(zhǔn)匹配
這樣兩者的搭配就可以實現(xiàn)點擊不同區(qū)域的圖片和文字就會出現(xiàn)高亮的效果
實例效果,這里稍微修改了一點樣式:

這種效果在PC端多用于導(dǎo)航欄,在移動端多用于tabBar,如果是移動端我們需要使用rem等系列手法轉(zhuǎn)換單位。
完整代碼
myTabbar.vue的代碼:
<template>
<div class="tabBar">
<ul>
<li v-for="(item, index) in list" :key="index" @click="change(item.path)">
<img :src="$route.path.includes(item.path) ? item.selected : item.active" />
<span :class="$route.path.includes(item.path) ? 'active' : ''">{{ item.title }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
title: '首頁',
path: '/home', // 需要跳轉(zhuǎn)的地址
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
},
{
title: '分類',
path: '/demo',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
},
{
title: '購物車',
path: '/cart',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
},
{
title: '我們',
path: '/my',
active: '../images/home.png', // 這里填寫未選擇圖片的路徑
selected: '../images/home-a.png' // 這里填寫選擇圖片的路徑,這里以vue圖標(biāo)為例
}
]
}
},
methods: {
change(path) {
this.$router.push(path) // 這種可以后退
// if(this.$router.path === path) return // 無痕瀏覽
// this.$router.replace(path)
}
}
}
</script>
<style scoped>
.tabBar {
position: fixed;
width: 100%;
height: 70px;
left: 0;
bottom: 0;
display: flex;
background: #ccc;
z-index: 999;
}
.tabBar ul {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tabBar ul li {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-around;
}
.tabBar ul li img {
width: 30px;
height: 100%;
margin-bottom: 5px;
}
.tabBar ul li span {
font-size: 15px;
}
.active {
color: red;
}
</style>
路由入口文件的代碼:
// 配置路由
export default new VueRouter({
? linkActiveClass: 'active',
? // linkExactActiveClass: 'active',
? // 配置路由
? routes: [...]
})全局引入的代碼:
// 引入全局組件tabBar
import myTabbar from '@/components/myTabbar'
Vue.component('myTabbar', myTabbar)以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0使用taro-ui-vue3引入組件不生效的問題及解決
這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue中對象數(shù)組改變其對象內(nèi)容值數(shù)組沒變化的原因與解決方案
最近開發(fā)遇到一個問題,修改對象某一個索引對象時,直接將對象賦值給數(shù)組的某一索引對象,該數(shù)組沒變化,在 Vue 中,直接修改對象數(shù)組中某個對象的屬性值時,數(shù)組的引用本身未改變,本文介紹了詳細的原理分析和解決方案,需要的朋友可以參考下2025-03-03
使用provide/inject實現(xiàn)跨組件通信的方法
在 Vue 應(yīng)用中,組件間通信是構(gòu)建復(fù)雜應(yīng)用時的一個常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實現(xiàn)跨組件通信,并通過示例代碼一步步進行說明,需要的朋友可以參考下2024-03-03

