vue实现导航栏效果(选中状态刷新不消失)
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钩子里边的代码改为: methods方法里边的代码修改为 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 () { / 8.55:小于320px不再缩小,11.2:大于420px不再放大 / return refreshRem; / 添加倍屏标识,安卓为1 / if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { if (!doc.addEventListener) return; }(window); 使用方法:把视觉稿中的px转换成rem;
无论设计图什么尺寸,算法一致。但需修改js 中 docWidth 变量为设计图宽度;默认设计图文档宽度为750px; 一些不使用rem的CSS属性。包括但不限于:border-width、border-radius、box-shadow、transform、background-size; 附录底部导航栏的代码(样式使用了less预编译):
本文已被整理到了《》,欢迎大家学习阅读。 关于vue.js组件的教程,请大家点击专题进行学习。 更多vue学习教程请阅读专题 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |