欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果

 更新時(shí)間：2022年10月09日 09:28:46   作者：The_more_more  
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前言

在pc端和移動(dòng)端的項(xiàng)目里面會(huì)遇見(jiàn)導(dǎo)航欄或者tabBar的點(diǎn)擊跳轉(zhuǎn)，圖片和文字的高亮效果，對(duì)于小程序來(lái)說(shuō)可以直接創(chuàng)建和修改圖片和文字的高亮效果，也可以使用相應(yīng)的組件庫(kù)去自定義一些效果，而在pc端和移動(dòng)端的來(lái)說(shuō)需要對(duì)導(dǎo)航欄或者tabBar進(jìn)行一定的封裝，使其成為全局組件的使用，結(jié)合組件間的數(shù)據(jù)傳遞可以實(shí)現(xiàn)不同頁(yè)面的不同信息的展示，本篇文章介紹路由跳轉(zhuǎn)的時(shí)候，使圖片和文字的高亮效果的方法

定義基本的組件

在demo的初期，我們需要在項(xiàng)目的components文件夾下創(chuàng)建封裝的tabBar組件，創(chuàng)建文件myTabbar.vue，接下來(lái)需要在main.js入口文件引入注冊(cè)：

// 引入全局組件tabBar
import myTabbar from '@/components/myTabbar'
Vue.component('myTabbar', myTabbar)

接下來(lái)需要我們簡(jiǎn)單書(shū)寫(xiě)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: '首頁(yè)',
          path: '/home', // 需要跳轉(zhuǎn)的地址
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        },
        {
          title: '分類(lèi)',
          path: '/demo',
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        },
        {
          title: '購(gòu)物車(chē)',
          path: '/cart',
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        },
        {
          title: '我們',
          path: '/my',
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        }
      ]
    }
  },
  methods: {
    change(path) {
      this.$router.push(path)  // 這種可以后退 和以下的方法選一即可
      // if(this.$router.path === path) return  // 無(wú)痕瀏覽
      // 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ī)則，點(diǎn)擊之后就可以跳轉(zhuǎn)了

文字高亮效果

圖片的高亮效果可以通過(guò)更改路徑來(lái)實(shí)現(xiàn)，文字的高亮效果需要邏輯來(lái)實(shí)現(xiàn)

首先定義一個(gè)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)匹配

這樣兩者的搭配就可以實(shí)現(xiàn)點(diǎn)擊不同區(qū)域的圖片和文字就會(huì)出現(xiàn)高亮的效果

實(shí)例效果，這里稍微修改了一點(diǎn)樣式：

實(shí)例效果

這種效果在PC端多用于導(dǎo)航欄，在移動(dòng)端多用于tabBar，如果是移動(dòng)端我們需要使用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: '首頁(yè)',
          path: '/home', // 需要跳轉(zhuǎn)的地址
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        },
        {
          title: '分類(lèi)',
          path: '/demo',
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        },
        {
          title: '購(gòu)物車(chē)',
          path: '/cart',
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        },
        {
          title: '我們',
          path: '/my',
          active: '../images/home.png', // 這里填寫(xiě)未選擇圖片的路徑
          selected: '../images/home-a.png' // 這里填寫(xiě)選擇圖片的路徑，這里以vue圖標(biāo)為例
        }
      ]
    }
  },
  methods: {
    change(path) {
      this.$router.push(path) // 這種可以后退
      // if(this.$router.path === path) return  // 無(wú)痕瀏覽
      // 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)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論