状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...
用
1、首先把這些小圖片放到src/assets路徑下面(自動(dòng)base64編碼)
2、在data()里邊定義一個(gè)選中對(duì)應(yīng)的變量isSelect，和循環(huán)遍歷的數(shù)組，數(shù)組下面放圖標(biāo)對(duì)應(yīng)的文字，和選中，未選中的圖片地址。??注意：圖片的地址不要直接寫，直接寫就是字符串，不僅會(huì)出現(xiàn)顯示不出圖片的情況，而且打包之后，還是這里地址，不會(huì)變。使用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')}
]
}
},
{{item.title}}
在methods中定義這個(gè)事件
methods: {
selectNav (title) {
this.isSelect = title
}
3、這個(gè)方法里還可以根據(jù)title的值去跳轉(zhuǎn)到相應(yīng)的路由，這樣一個(gè)基本的底部導(dǎo)航欄就是實(shí)現(xiàn)了。
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)
}
}
但是電腦調(diào)試的時(shí)候會(huì)發(fā)現(xiàn)，刷新瀏覽器后，選中的狀態(tài)就會(huì)消失。(你可能會(huì)覺得用戶一般不會(huì)在手機(jī)端刷新頁面/或者直接輸入路由跳轉(zhuǎn)到相應(yīng)的頁面，如果要追求完美的，請(qǐng)繼續(xù)往下看)比如，我選中的狀態(tài)是創(chuàng)業(yè)直播：
當(dāng)我點(diǎn)擊刷新頁面后，就會(huì)返回到默認(rèn)的首頁狀態(tài)，如下。
解決辦法：
每次點(diǎn)擊切換底部導(dǎo)航的時(shí)候，把選中的狀態(tài)存入sessStorage里邊。在mounted鉤子里把這個(gè)狀態(tài)取出來賦值給這個(gè)isSelect變量就可以實(shí)現(xiàn)選中狀態(tài)不消失了。
mounted () {
this.isSelect = sessionStorage.getItem('isSelect')
},
methods: {
selectNav (title) {
this.isSelect = title
sessionStorage.setItem('isSelect', this.isSelect)
}
}
經(jīng)過測(cè)試，新的問題又發(fā)現(xiàn)了，比如當(dāng)前在“創(chuàng)業(yè)直播”這個(gè)狀態(tài)上，我在瀏覽器上直接輸入“
在router/index.
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、手機(jī)端一般要求自適應(yīng)各種大小的手機(jī)端屏幕，你可以選擇用媒體查詢，或者
* rem計(jì)算方式：設(shè)計(jì)圖尺寸px / 100 = 實(shí)際rem 【例: 100px = 1rem，32px = .32rem】
*/
!function (window) {
/* 設(shè)計(jì)圖文檔寬度 */
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;
})();
/* 添加倍屏標(biāo)識(shí)，安卓為1 */
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS標(biāo)識(shí) */
doc.documentElement.classList.add('ios');
/* IOS8以上給
使用方法：
把視覺稿中的px轉(zhuǎn)換成rem；
rem計(jì)算方式：設(shè)計(jì)圖尺寸px / 100 = 實(shí)際rem 【例: 100px = 1rem，32px = 0.32rem】；
特別注意：是不需要再除以2的！
無論設(shè)計(jì)圖什么尺寸，算法一致。但需修改js 中 docWidth 變量為設(shè)計(jì)圖寬度；默認(rèn)設(shè)計(jì)圖文檔寬度為750px； 一些不使用rem的
附錄底部導(dǎo)航欄的代碼(樣式使用了less預(yù)編譯)：
{{item.title}}
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
}
}
}
}
.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;
}
}
本文已被整理到了《
關(guān)于
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持前端開發(fā)者。
總結(jié)
以上是生活随笔為你收集整理的状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android适配华为手机,华为Mate
- 下一篇： html5倒计时秒杀怎么做,vue 设