vue底部导航栏（选中状态刷新不消失）解决

我们用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标是我自己找的，选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了）

关于布局的已经写过了，在这个博客文件中.
当然还有新的方法去写导航
首先在导航页面中的data（）里边定义一个选中对应的变量isSelect，和循环遍历的数组，数组下面放图标对应的文字，和选中，未选中的图片地址。注意：图片的地址不要直接写，直接写就是字符串，不仅会出现显示不出图片的情况，而且打包之后，还是这里地址，不会变。使用webpack提供的require引入图片地址就可以解决以上问题。

Nav.vue 文件

   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: '米圈', 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: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')}]}},

设置了基本的数据
那我们在template 中

<template><div class="Nav"><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 中写入

  methods: {selectNav (title) { // 选中的是哪个路由导航this.isSelect = title}这个方法里还可以根据title的值去跳转到相应的路由，这样一个基本的底部导航栏就是实现了。或者methods: {selectNav (title) {this.isSelect = titleswitch (title) {case '首页': this.$router.push('/home')breakcase '分类': this.$router.push('/classify')breakcase '米圈': this.$router.push('/ring')breakcase '购物车': this.$router.push('/shop')breakcase '我的': this.$router.push('/mine')break}sessionStorage.setItem('isSelect', this.isSelect) // 存入sessionStorage里面}}但是 电脑调试的时候会发现，刷新浏览器后，选中的状态还是有可能会消失。

解决办法：
每次点击切换底部导航的时候，把选中的状态存入sessStorage里边。在mounted钩子里把这个状态在取出来赋值给这个isSelect变量就可以实现选中状态不消失了。

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

但是经过测试，新的问题又发现了，比如当前在“米圈”这个状态上，我在浏览器上直接输入“http://localhost:8080/#/ring”，这样用上面的办法就解决不了问题了。最好的办法就是和路由绑定无论点击，还是浏览器上输入路由改变，都正确显示选中状态。
就是在router/index.js里边映射组件路由时，加上对应的name ,最好用英文

  routes: [{path: '/',redirect: '/home'},{path: '/home',name: '首页',component:() => import('../views/Home.vue')},{path: '/classify',name: '分类',component:() => import('../views/Classify.vue')},{path: '/ring',name: '米圈',component: () => import('../views/Ring.vue')},{path: '/shop',name: '购物车',component: () => import('../views/Shop.vue')},{path: '/mine',name: '我的', component: () => import('../views/Mine.vue')}]

这时候nav.vue文件中mounted钩子和methods方法里边的代码改为：

mounted () {this.isSelect = this.$route.name
},
methods: {selectNav (title) {this.isSelect = this.$route.nameswitch (title) {case '首页': this.$router.push('/home')breakcase '分类': this.$router.push('/classify')breakcase '米圈': this.$router.push('/ring')breakcase '购物车': this.$router.push('/shop')breakcase '我的': this.$router.push('/mine')break}}
}

注意的是
手机端一般要求自适应各种大小的手机端屏幕，你可以选择用媒体查询，或者js控制font-size。这里我用的是js控制font-size,在index.html引入下面的js。

 * rem计算方式：设计图尺寸px / 100 = 实际rem  【例: 100px = 1rem，32px = 0.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);// 特别注意：是不需要再除以2的！无论设计图什么尺寸，算法一致。但需修改js 中 docWidth 变量为设计图宽度；默认设计图文档宽度为750px； 一些不使用rem的CSS属性。包括但不限于：border-width、border-radius、box-shadow、transform、background-size；

完整的代码下边就是

<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: '米圈', 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: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')}]}},mounted () {this.isSelect = this.$route.name // 重要的在这里和下边，也可以直接用判断 window.location.hash.indexOf('name这里是router里的name' > -1) 然后重新赋值默认选项// 用了这个那就不用methods里的方法了，其实都一样// 默认是首页了/**if(window.location.hash.indexOf('fenlei')>-1){ // this.selectIndex =1 // 分类} else if (window.location.hash.indexOf('miquan')>-1){this.selectIndex =2 // 米圈} else if (window.location.hash.indexOf('gouwuche')>-1){this.selectIndex =3 // 购物车} else if (window.location.hash.indexOf('wode')>-1){this.selectIndex =4 // 我的} else {this.selectIndex = 0 // 首页}*/},methods: {selectNav (title) {this.isSelect = this.$route.nameswitch (title) {case '首页': this.$router.push('/home')breakcase '分类': this.$router.push('/classify')breakcase '米圈': this.$router.push('/ring')breakcase '购物车': this.$router.push('/shop')breakcase '我的': this.$router.push('/mine')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>

解决了。
当然了还有一个办法，监听

  methods: {// 页面切换tapPage(index, routeName) {this.selectIndex = index; // 下标// 编程式路由跳转//  是因为vue-router 3.0之后的版本中，push跳转使用了异步的处理//    当插入相同的地址信息之后就会报错，可以添加catch对异常做捕获this.$router.push({name: routeName, // 传递路由的name}).catch(() => {// catch对异常做捕获});},},// 监听 路由比对，设定index 下标watch: {$route() {if (this.$route.path == "/home") {this.selectIndex = 0;}if (this.$route.path == "/list") {this.selectIndex = 1;}if (this.$route.path == "/cart") {this.selectIndex = 2;}if (this.$route.path == "/user") {this.selectIndex = 3;}},},// 钩子函数这里也要注意下mounted() { // 浏览器路由// console.log(window.location);// 根据当前的地址信息, 设置选中的图标索引.解决刷新之后的问题//  没有使用this.$route.xx 进行设置，因为有些时候获取不到路由信息if (window.location.hash.indexOf("home") > -1) {this.selectIndex = 0;}if (window.location.hash.indexOf("list") > -1) {this.selectIndex = 1;}if (window.location.hash.indexOf("cart") > -1) {this.selectIndex = 2;}if (window.location.hash.indexOf("user") > -1) {this.selectIndex = 3;}},

vue底部导航栏（选中状态刷新不消失）解决相关推荐

vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...
用 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选 ...
开发vue底部导航栏组件
这个想法源于最近自己在开发一个移动端博客的一个底部导航栏,原型设计如下: 我们来分析一下这个导航栏,其实很简单啦,就是自适应固定在底部我们可以使用CSS3属性display:flex设置父级盒子为伸 ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
android底部导航栏选中动画,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样就想着这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种是选中哪个,哪个就突出第一种方法简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
html 导航栏选中状态,jQuery“导航栏点击选中效果“代码
现在的网站菜单导航栏几乎都有点击选中效果,正好今天我在开发项目中也需要用上这样的效果,下面就给大家分享一下,亲测有效,大家放心使用. 1.引入jQuery核心文件 2.加入"jQuery导航 ...
html 导航栏选中状态,CSS导航菜单高亮选中菜单项
我开发了一个CSS导航菜单,并为每个导航项我写了php.file.CSS导航菜单高亮选中菜单项 homepage.php My First Try Of CSS Navigation Bar /* B ...
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录一.BottomNavigationBar 组件二.BottomNavigationBarItem 组件三.BottomNavigationBar 底部导航栏代码示例四.BottomN ...
mui实现底部导航栏页面切换
1 问题描述 mui是一款最接近原生的框架,对于会使用的人来说十分的便捷易操作,但对于像笔者这样刚入门的小白可是十分的陌生和走了太多的弯路. 对于那些不懂的前端的人,或者是一些刚入门html的人,他们 ...

vue底部导航栏（选中状态刷新不消失）解决

vue底部导航栏（选中状态刷新不消失）解决相关推荐

最新文章

热门文章