亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vuejs切換導(dǎo)航條高亮路由高亮做法

jerryloveemily / 2346人閱讀

摘要：我的前端經(jīng)驗(yàn)總結(jié)，喜歡的話請(qǐng)點(diǎn)導(dǎo)航條高亮我的做法用一個(gè)數(shù)組存導(dǎo)航條，用循環(huán)它，這樣可以減少代碼，二可以使用它的下標(biāo)來(lái)判斷高亮，三還可以獲取后端的導(dǎo)航信息來(lái)遍歷重點(diǎn)是在函數(shù)，傳入當(dāng)前點(diǎn)擊的下標(biāo)，自定義一個(gè)下標(biāo)，判斷是否相等就用三元符號(hào)判斷

我的GitHub前端經(jīng)驗(yàn)總結(jié)，喜歡的話請(qǐng)點(diǎn)star??Thanks.:https://github.com/liangfengbo/frontend-develop

vuejs導(dǎo)航條高亮我的做法：

用一個(gè)數(shù)組存導(dǎo)航條，用v-for循環(huán)它，這樣可以減少代碼，二可以使用它的下標(biāo)來(lái)判斷高亮，三還可以獲取后端的導(dǎo)航信息來(lái)遍歷

重點(diǎn)是在：routerLink(index, path)函數(shù)，傳入當(dāng)前點(diǎn)擊的下標(biāo)，自定義一個(gè)下標(biāo)，判斷是否相等就用三元符號(hào)判斷多給一個(gè)高亮樣式

如何解決刷新就不高亮或第一個(gè)高亮了，很簡(jiǎn)單，監(jiān)聽(tīng)一下當(dāng)前路由在判斷就好了

具體代碼都在下面了

效果圖：

html代碼

data數(shù)據(jù)

// 導(dǎo)航條
data() {
  return {
    nav: [
      {title: "首頁(yè)", en: "Code", path: "/"},
      {title: "開(kāi)源", en: "Source", path: "/source"},
      {title: "關(guān)于", en: "About", path: "/about"},
    ],
    navIndex: 0,
  }
},

methods方法：

/**
 * 路由跳轉(zhuǎn)
 * @param index
 * @param link
*/
routerLink(index, path) {
  // 點(diǎn)擊哪個(gè)路由就賦值給自定義的下下標(biāo)
  this.navIndex = index;
  // 路由跳轉(zhuǎn)
  this.$router.push(path)
},

/**
 * 檢索當(dāng)前路徑
 * @param path
*/
checkRouterLocal(path) {
  // 查找當(dāng)前路由下標(biāo)高亮
  this.navIndex = this.nav.findIndex(item => item.path === path);
}

監(jiān)聽(tīng)路由變化獲取當(dāng)前路由

watch: {
  "$route"() {
    // 獲取當(dāng)前路徑
    let path = this.$route.path;
    // 檢索當(dāng)前路徑
    this.checkRouterLocal(path);
  }
},

css樣式

.nav-box {
  display: flex;
}

.nav-item {
  text-align: center;
  padding: 0 32px;
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 25px;
}

/*導(dǎo)航普通狀態(tài)*/
.item-cn {
  color: #1c2438;
  font-weight: 800;
}

/*導(dǎo)航普通狀態(tài)*/
.item-en {
  color: #666;
  font-size: 12px;
}

/*導(dǎo)航高亮*/
.item-cn-active {
  color: #2d8cf0;
}

/*導(dǎo)航高亮*/
.item-en-active {
  color: #5cadff;
}

.nav-item:hover .item-cn {
  color: #2d8cf0;
}

.nav-item:hover .item-en {
  color: #5cadff;
}

.nav-item:after {
  position: absolute;
  right: 0;
  top: 20px;
  content: "";
  width: 1px;
  height: 16px;
  background-color: #f8f8f8;
}

.nav-item:after:last-child {
  width: 0;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107786.html

相關(guān)文章

  • 【Vue.js】vue-router實(shí)現(xiàn)二級(jí)導(dǎo)航切換路由及高亮顯示

    摘要：這里以網(wǎng)易云音樂(lè)作為示例，效果圖我們先一層一層寫導(dǎo)航先設(shè)計(jì)第一層設(shè)計(jì)導(dǎo)航頁(yè)面樣式第一個(gè)導(dǎo)航頁(yè)面為發(fā)現(xiàn)第二個(gè)導(dǎo)航頁(yè)面為其余代碼一樣，注意要把改為相應(yīng)路由配置路由使用制作導(dǎo)航我們創(chuàng)建一個(gè)新組件把他插入到中設(shè)計(jì)好路由的數(shù)據(jù)源發(fā)現(xiàn)音樂(lè)我的 這里以網(wǎng)易云音樂(lè)作為示例，效果圖： showImg(https://segmentfault.com/img/bVbuOO3?w=2160&h=224); ...

    blair 評(píng)論0 收藏0

  • vue 仿今日頭條

    摘要：在下沒(méi)有該問(wèn)題。解決辦法部分這里隨意，需要用設(shè)定部分問(wèn)題懶加載解決方法稍后補(bǔ)充參考文獻(xiàn)組件按需加載路由懶加載項(xiàng)目中使用將多個(gè)組件合并打包并實(shí)現(xiàn)按需加載 vue 仿今日頭條 為了增加移動(dòng)端項(xiàng)目的經(jīng)驗(yàn)，近一周通過(guò) vue 仿寫今日頭條，以下就項(xiàng)目實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題以及解決方法給出總結(jié)，有什么不正確的地方，懇請(qǐng)大家批評(píng)指正^?_?^！，代碼倉(cāng)庫(kù)地址為 github 一、實(shí)現(xiàn)功能 首頁(yè)展示...

    ShowerSun 評(píng)論0 收藏0

  • vue 仿今日頭條

    摘要：在下沒(méi)有該問(wèn)題。解決辦法部分這里隨意，需要用設(shè)定部分問(wèn)題懶加載解決方法稍后補(bǔ)充參考文獻(xiàn)組件按需加載路由懶加載項(xiàng)目中使用將多個(gè)組件合并打包并實(shí)現(xiàn)按需加載 vue 仿今日頭條 為了增加移動(dòng)端項(xiàng)目的經(jīng)驗(yàn)，近一周通過(guò) vue 仿寫今日頭條，以下就項(xiàng)目實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題以及解決方法給出總結(jié)，有什么不正確的地方，懇請(qǐng)大家批評(píng)指正^?_?^！，代碼倉(cāng)庫(kù)地址為 github 一、實(shí)現(xiàn)功能 首頁(yè)展示...

    Sourcelink 評(píng)論0 收藏0

  • vue使用原生js實(shí)現(xiàn)滾動(dòng)頁(yè)面跟蹤導(dǎo)航高亮

    摘要：需要使用做一個(gè)專題頁(yè)面。滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡?。監(jiān)聽(tīng)滾動(dòng)頁(yè)面事件，對(duì)比當(dāng)前頁(yè)面的位置與元素的位置，如果當(dāng)前滾動(dòng)的區(qū)域位置大于元素的位置，導(dǎo)航添加，其他去掉進(jìn)行樣式切換。 需要使用vue做一個(gè)專題頁(yè)面。 滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡痢? 監(jiān)聽(tīng)滾動(dòng)頁(yè)面事件，對(duì)比當(dāng)前頁(yè)面的位置與元素的位置，如果當(dāng)前滾動(dòng)的區(qū)域位置大于元素的位置，導(dǎo)航添加class，其他去掉class進(jìn)行樣式切換。 ...

    bluesky 評(píng)論0 收藏0

  • vue使用原生js實(shí)現(xiàn)滾動(dòng)頁(yè)面跟蹤導(dǎo)航高亮

    摘要：需要使用做一個(gè)專題頁(yè)面。滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡?。監(jiān)聽(tīng)滾動(dòng)頁(yè)面事件，對(duì)比當(dāng)前頁(yè)面的位置與元素的位置，如果當(dāng)前滾動(dòng)的區(qū)域位置大于元素的位置，導(dǎo)航添加，其他去掉進(jìn)行樣式切換。 需要使用vue做一個(gè)專題頁(yè)面。 滾動(dòng)頁(yè)面指定區(qū)域?qū)Ш礁吡痢? 監(jiān)聽(tīng)滾動(dòng)頁(yè)面事件，對(duì)比當(dāng)前頁(yè)面的位置與元素的位置，如果當(dāng)前滾動(dòng)的區(qū)域位置大于元素的位置，導(dǎo)航添加class，其他去掉class進(jìn)行樣式切換。 ...

    YanceyOfficial 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<