vue實現導航欄效果(選中狀態(tài)刷新不消失)

更新時間：2022年04月12日 09:53:01 作者：羞羞的鐵拳

這篇文章主要為大家詳細介紹了vue實現導航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue導航欄

用Vue寫手機端的項目，經常會寫底部導航欄，我這里總結一套比較方便實用的底部導航欄方法，并且可以解決瀏覽器刷新選中狀態(tài)消失的問題。也可以選擇自適應屏幕?？匆幌滦Ч撞康膱D標全是UI給的選中和未選中樣式的圖片，根據公司要求，你也可能會用fontsize去寫。（全部代碼黏貼到本文的最后面了）

1、首先把這些小圖片放到src/assets路徑下面（自動base64編碼）

2、在data（）里邊定義一個選中對應的變量isSelect，和循環(huán)遍歷的數組，數組下面放圖標對應的文字，和選中，未選中的圖片地址。注意：圖片的地址不要直接寫，直接寫就是字符串，不僅會出現顯示不出圖片的情況，而且打包之后，還是這里地址，不會變。使用webpack提供的require引入圖片地址就可以解決以上問題。

data () { 
 return { 
 isSelect: '首頁', 
 nav: [ 
 {title: '首頁', url: require('../../assets/common/首頁@2x.png'), url_one: require('../../assets/common/首頁_active@2x.png')}, 
 {title: '店鋪', url: require('../../assets/common/店鋪@2x.png'), url_one: require('../../assets/common/店鋪_active@2x.png')}, 
 {title: '創(chuàng)業(yè)直播', url: require('../../assets/common/直播@2x.png'), url_one: require('../../assets/common/直播_active@2x.png')}, 
 {title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')} 
 ] 
 } 
 },

html遍歷這個nav數組，并且給每個li注冊點擊事件selectNav()，參數就是title。

<ul> 
 <li v-for="item in nav" @click="selectNav(item.title)"> 
 <img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title"> 
 <p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p> 
 </li> 
 </ul>

在methods中定義這個事件

methods: { 
 selectNav (title) { 
 this.isSelect = title 
 }

3、這個方法里還可以根據title的值去跳轉到相應的路由，這樣一個基本的底部導航欄就是實現了。

methods: { 
 selectNav (title) { 
 this.isSelect = title 
 switch (title) { 
 case '首頁': this.$router.push('/index') 
 break 
 case '店鋪': this.$router.push('/shop') 
 break 
 case '創(chuàng)業(yè)直播': this.$router.push('/live') 
 break 
 case '我的': this.$router.push('/my') 
 break 
 } 
 sessionStorage.setItem('isSelect', this.isSelect) 
 } 
 }

但是電腦調試的時候會發(fā)現，刷新瀏覽器后，選中的狀態(tài)就會消失。（你可能會覺得用戶一般不會在手機端刷新頁面/或者直接輸入路由跳轉到相應的頁面，如果要追求完美的，請繼續(xù)往下看）比如，我選中的狀態(tài)是創(chuàng)業(yè)直播：

當我點擊刷新頁面后，就會返回到默認的首頁狀態(tài)，如下。

解決辦法：

每次點擊切換底部導航的時候，把選中的狀態(tài)存入sessStorage里邊。在mounted鉤子里把這個狀態(tài)取出來賦值給這個isSelect變量就可以實現選中狀態(tài)不消失了。

mounted () { 
 this.isSelect = sessionStorage.getItem('isSelect') 
 }, 
 methods: { 
 selectNav (title) { 
 this.isSelect = title 
 sessionStorage.setItem('isSelect', this.isSelect) 
 } 
 }

經過測試，新的問題又發(fā)現了，比如當前在“創(chuàng)業(yè)直播”這個狀態(tài)上，我在瀏覽器上直接輸入“http://localhost:8080/#/shop”，這樣用上面的辦法就解決不了問題了。最好的辦法就是和路由綁定無論點擊，還是瀏覽器上輸入路由改變，都正確顯示選中狀態(tài)。

在router/index.js里邊映射組件路由時，加上對應的name

routes: [ 
 { 
 path: '/', 
 redirect: '/index' 
 }, 
 { 
 path: '/index', 
 name: '首頁', 
 component: index 
 }, 
 { 
 path: '/live', 
 name: '創(chuàng)業(yè)直播', 
 component: live 
 }, 
 { 
 path: '/my', 
 name: '我的', 
 component: my 
 }, 
 { 
 path: '/shop', 
 name: '店鋪', 
 component: shop 
 } 
]

mounted鉤子里邊的代碼改為：

mounted () { 
 this.isSelect = this.$route.name 
 },

methods方法里邊的代碼修改為

4、手機端一般要求自適應各種大小的手機端屏幕，你可以選擇用媒體查詢，或者js控制font-size。這里我用的是js控制font-size,在index.html引入下面的js。

 * rem計算方式：設計圖尺寸px / 100 = 實際rem 【例: 100px = 1rem，32px = .32rem】 
 */ 
!function (window) { 
 
 /* 設計圖文檔寬度 */ 
 var docWidth = 750; 
 
 var doc = window.document, 
 docEl = doc.documentElement, 
 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 
 
 var recalc = (function refreshRem () { 
 var clientWidth = docEl.getBoundingClientRect().width; 
 
 /* 8.55：小于320px不再縮小，11.2：大于420px不再放大 */ 
 docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; 
 
 return refreshRem; 
 })(); 
 
 /* 添加倍屏標識，安卓為1 */ 
 docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); 
 
 if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { 
 /* 添加IOS標識 */ 
 doc.documentElement.classList.add('ios'); 
 /* IOS8以上給html添加hairline樣式，以便特殊處理 */ 
 if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) 
 doc.documentElement.classList.add('hairline'); 
 } 
 
 if (!doc.addEventListener) return; 
 window.addEventListener(resizeEvt, recalc, false); 
 doc.addEventListener('DOMContentLoaded', recalc, false); 
 
}(window);

使用方法：

把視覺稿中的px轉換成rem；

rem計算方式：設計圖尺寸px / 100 = 實際rem 【例: 100px = 1rem，32px = 0.32rem】；
特別注意：是不需要再除以2的！

無論設計圖什么尺寸，算法一致。但需修改js 中 docWidth 變量為設計圖寬度；默認設計圖文檔寬度為750px；一些不使用rem的CSS屬性。包括但不限于：border-width、border-radius、box-shadow、transform、background-size；

附錄底部導航欄的代碼（樣式使用了less預編譯）：

<template> 
 <div class="common_foot"> 
 <ul> 
 <li v-for="item in nav" @click="selectNav(item.title)"> 
 <img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title"> 
 <p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p> 
 </li> 
 </ul> 
 </div> 
</template> 
 
<script> 
 export default { 
 data () { 
 return { 
 isSelect: '首頁', 
 nav: [ 
 {title: '首頁', url: require('../../assets/common/首頁@2x.png'), url_one: require('../../assets/common/首頁_active@2x.png')}, 
 {title: '店鋪', url: require('../../assets/common/店鋪@2x.png'), url_one: require('../../assets/common/店鋪_active@2x.png')}, 
 {title: '創(chuàng)業(yè)直播', url: require('../../assets/common/直播@2x.png'), url_one: require('../../assets/common/直播_active@2x.png')}, 
 {title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')} 
 ] 
 } 
 }, 
 mounted () { 
 this.isSelect = this.$route.name 
 }, 
 methods: { 
 selectNav (title) { 
 this.isSelect = this.$route.name 
 switch (title) { 
 case '首頁': this.$router.push('/index') 
 break 
 case '店鋪': this.$router.push('/shop') 
 break 
 case '創(chuàng)業(yè)直播': this.$router.push('/live') 
 break 
 case '我的': this.$router.push('/my') 
 break 
 } 
 } 
 } 
 } 
</script> 
 
<style lang="less" scoped> 
 .common_foot>ul{ 
 position: fixed; 
 bottom: 0; 
 z-index: 1000; 
 height: 0.98rem; 
 width: 100%; 
 overflow: hidden; 
 background-color: white; 
 li{ 
 float: left; 
 width: 25%; 
 height: 100%; 
 text-align: center; 
 cursor: pointer; 
 padding: 0.15rem 0 0.13rem 0; 
 } 
 p{font-size: 0.2rem;color: #7f7f7f;} 
 img{ 
 width: 0.48rem; 
 height: 0.45rem; 
 } 
 .active{ 
 color: #ffd100; 
 } 
 } 
</style>

本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
記一次vue跨域的解決
這篇文章主要介紹了vue跨域的解決方法，幫助大家解決前端跨域問題，感興趣的朋友可以參考下
2020-10-10
vue實現數據控制視圖的原理解析
這篇文章主要介紹了vue如何實現的數據控制視圖的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
如何用vue封裝axios請求
對axios進行封裝以及將API接口按業(yè)務模塊統(tǒng)一管理，有助于我們簡化代碼，方便后期維護。本文介紹了如何用vue封裝axios請求，感興趣的同學，可以參考下。
2021-06-06
Vue+Element UI+Lumen實現通用表格分頁功能
這篇文章主要介紹了Vue+Element UI+Lumen實現通用表格分頁功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-02-02
Vue?3?使用moment設置顯示時間格式的問題及解決方法
在Vue?3中,因為過濾器(filter)已經被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設置顯示時間格式的問題及解決方法,感興趣的朋友一起看看吧
2023-12-12
vue中elementUI表單循環(huán)驗證方式
這篇文章主要介紹了vue中elementUI表單循環(huán)驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
基于Vue實現微前端的示例代碼
這篇文章主要介紹了基于Vue實現微前端的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
如何利用vue+element?ui實現好看的登錄界面
最近做了個最基礎的ElementUI登錄頁,適合新手查看,所以下面這篇文章主要給大家介紹了關于如何利用vue+element?ui實現好看的登錄界面的相關資料,需要的朋友可以參考下
2022-05-05
$解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題$
解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題
這篇文章主要介紹了解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04