Vue導(dǎo)航欄
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、冷水江網(wǎng)站維護(hù)、網(wǎng)站推廣。
用Vue寫手機(jī)端的項(xiàng)目,經(jīng)常會寫底部導(dǎo)航欄,我這里總結(jié)一套比較方便實(shí)用的底部導(dǎo)航欄方法,并且可以解決瀏覽器刷新選中狀態(tài)消失的問題。也可以選擇自適應(yīng)屏幕??匆幌滦Ч?,底部的圖標(biāo)全是UI給的選中和未選中樣式的圖片,根據(jù)公司要求,你也可能會用fontsize去寫。(全部代碼黏貼到本文的最后面了)
1、首先把這些小圖片放到src/assets路徑下面(自動base64編碼)
2、在data()里邊定義一個選中對應(yīng)的變量isSelect,和循環(huán)遍歷的數(shù)組,數(shù)組下面放圖標(biāo)對應(yīng)的文字,和選中,未選中的圖片地址。 注意:圖片的地址不要直接寫,直接寫就是字符串,不僅會出現(xià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數(shù)組,并且給每個li注冊點(diǎn)擊事件selectNav(),參數(shù)就是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、這個方法里還可以根據(jù)title的值去跳轉(zhuǎn)到相應(yīng)的路由,這樣一個基本的底部導(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)試的時候會發(fā)現(xiàn),刷新瀏覽器后,選中的狀態(tài)就會消失。(你可能會覺得用戶一般不會在手機(jī)端刷新頁面/或者直接輸入路由跳轉(zhuǎn)到相應(yīng)的頁面,如果要追求完美的,請繼續(xù)往下看)比如,我選中的狀態(tài)是創(chuàng)業(yè)直播:
當(dāng)我點(diǎn)擊刷新頁面后,就會返回到默認(rèn)的首頁狀態(tài),如下。
解決辦法:
每次點(diǎn)擊切換底部導(dǎo)航的時候,把選中的狀態(tài)存入sessStorage里邊。在mounted鉤子里把這個狀態(tài)取出來賦值給這個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)過測試,新的問題又發(fā)現(xiàn)了,比如當(dāng)前在“創(chuàng)業(yè)直播”這個狀態(tài)上,我在瀏覽器上直接輸入“http://localhost:8080/#/shop”,這樣用上面的辦法就解決不了問題了。最好的辦法就是和路由綁定無論點(diǎn)擊,還是瀏覽器上輸入路由改變,都正確顯示選中狀態(tài)。
在router/index.js里邊映射組件路由時,加上對應(yīng)的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、手機(jī)端一般要求自適應(yīng)各種大小的手機(jī)端屏幕,你可以選擇用媒體查詢,或者js控制font-size。這里我用的是js控制font-size,在index.html引入下面的js。
* rem計算方式:設(shè)計圖尺寸px / 100 = 實(shí)際rem 【例: 100px = 1rem,32px = .32rem】 */ !function (window) { /* 設(shè)計圖文檔寬度 */ 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)識,安卓為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)識 */ 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轉(zhuǎn)換成rem;
rem計算方式:設(shè)計圖尺寸px / 100 = 實(shí)際rem 【例: 100px = 1rem,32px = 0.32rem】;
特別注意:是不需要再除以2的!
無論設(shè)計圖什么尺寸,算法一致。但需修改js 中 docWidth 變量為設(shè)計圖寬度;默認(rèn)設(shè)計圖文檔寬度為750px; 一些不使用rem的CSS屬性。包括但不限于:border-width、border-radius、box-shadow、transform、background-size;
附錄底部導(dǎo)航欄的代碼(樣式使用了less預(yù)編譯):
<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前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁標(biāo)題:vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
新聞來源:http://bm7419.com/article6/jdjdog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、建站公司、品牌網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、用戶體驗(yàn)、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)