Vue导航栏
用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标全是UI给的选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了）
1、首先把这些小图片放到src/assets路径下面（自动base64编码）
2、在data（）里边定义一个选中对应的变量isSelect，和循环遍历的数组，数组下面放图标对应的文字，和选中，未选中的图片地址。注意：图片的地址不要直接写，直接写就是字符串，不仅会出现显示不出图片的情况，而且打包之后，还是这里地址，不会变。使用webpack提供的require引入图片地址就可以解决以上问题。
html遍历这个nav数组，并且给每个li注册点击事件selectNav()，参数就是title。
在methods中定义这个事件
3、这个方法里还可以根据title的值去跳转到相应的路由，这样一个基本的底部导航栏就是实现了。
但是电脑调试的时候会发现，刷新浏览器后，选中的状态就会消失。（你可能会觉得用户一般不会在手机端刷新页面/或者直接输入路由跳转到相应的页面，如果要追求完美的，请继续往下看）比如，我选中的状态是创业直播：
解决办法：
每次点击切换底部导航的时候，把选中的状态存入sessstorage里边。在mounted钩子里把这个状态取出来赋值给这个isSelect变量就可以实现选中状态不消失了。
经过测试，新的问题又发现了，比如当前在“创业直播”这个状态上，我在浏览器上直接输入“http://localhost:8080/#/shop”，这样用上面的办法就解决不了问题了。最好的办法就是和路由绑定无论点击，还是浏览器上输入路由改变，都正确显示选中状态。
在router/index.js里边映射组件路由时，加上对应的name
mounted钩子里边的代码改为：
4、手机端一般要求自适应各种大小的手机端屏幕，你可以选择用媒体查询，或者js控制font-size。这里我用的是js控制font-size,在index.html引入下面的js。
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',false);
}(window);
使用方法：
把视觉稿中的px转换成rem；
无论设计图什么尺寸，算法一致。但需修改js 中 docWidth 变量为设计图宽度；默认设计图文档宽度为750px； 一些不使用rem的CSS属性。包括但不限于：border-width、border-radius、Box-shadow、transform、background-size； 本文已被整理到了《》，欢迎大家学习阅读。 关于vue.js组件的教程，请大家点击专题进行学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 原文地址：https://www.jb51.cc/vue/34733.html 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
