状态输出导航栏html,vue实现导航栏效果（选中状态刷新不消失）-ag凯发k8国际
用
1、首先把这些小图片放到src/assets路径下面(自动base64编码)
2、在data()里边定义一个选中对应的变量isselect，和循环遍历的数组，数组下面放图标对应的文字，和选中，未选中的图片地址。 注意：图片的地址不要直接写，直接写就是字符串，不仅会出现显示不出图片的情况，而且打包之后，还是这里地址，不会变。使用webpack提供的require引入图片地址就可以解决以上问题。
data () {
return {
isselect: 'ag凯发k8国际首页',
nav: [
{title: 'ag凯发k8国际首页', url: require('../../assets/common/ag凯发k8国际首页@2x.png'), url_one: require('../../assets/common/ag凯发k8国际首页_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')}
]
}
},
{{item.title}}
在methods中定义这个事件
methods: {
selectnav (title) {
this.isselect = title
}
3、这个方法里还可以根据title的值去跳转到相应的路由，这样一个基本的底部导航栏就是实现了。
methods: {
selectnav (title) {
this.isselect = title
switch (title) {
case 'ag凯发k8国际首页': this.$router.push('/index')
break
case '店铺': this.$router.push('/shop')
break
case '创业直播': this.$router.push('/live')
break
case '我的': this.$router.push('/my')
break
}
sessionstorage.setitem('isselect', this.isselect)
}
}
但是电脑调试的时候会发现，刷新浏览器后，选中的状态就会消失。(你可能会觉得用户一般不会在手机端刷新页面/或者直接输入路由跳转到相应的页面，如果要追求完美的，请继续往下看)比如，我选中的状态是创业直播：
当我点击刷新页面后，就会返回到默认的ag凯发k8国际首页状态，如下。
解决办法：
每次点击切换底部导航的时候，把选中的状态存入sessstorage里边。在mounted钩子里把这个状态取出来赋值给这个isselect变量就可以实现选中状态不消失了。
mounted () {
this.isselect = sessionstorage.getitem('isselect')
},
methods: {
selectnav (title) {
this.isselect = title
sessionstorage.setitem('isselect', this.isselect)
}
}
经过测试，新的问题又发现了，比如当前在“创业直播”这个状态上，我在浏览器上直接输入“
在router/index.
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'ag凯发k8国际首页',
component: index
},
{
path: '/live',
name: '创业直播',
component: live
},
{
path: '/my',
name: '我的',
component: my
},
{
path: '/shop',
name: '店铺',
component: shop
}
]
mounted钩子里边的代码改为：
mounted () {
this.isselect = this.$route.name
},
methods方法里边的代码修改为
4、手机端一般要求自适应各种大小的手机端屏幕，你可以选择用媒体查询，或者
* rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = .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以上给
使用方法：
把视觉稿中的px转换成rem；
rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = 0.32rem】；
特别注意：是不需要再除以2的！
无论设计图什么尺寸，算法一致。但需修改js 中 docwidth 变量为设计图宽度；默认设计图文档宽度为750px； 一些不使用rem的
附录底部导航栏的代码(样式使用了less预编译)：
{{item.title}}
export default {
data () {
return {
isselect: 'ag凯发k8国际首页',
nav: [
{title: 'ag凯发k8国际首页', url: require('../../assets/common/ag凯发k8国际首页@2x.png'), url_one: require('../../assets/common/ag凯发k8国际首页_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
},
methods: {
selectnav (title) {
this.isselect = this.$route.name
switch (title) {
case 'ag凯发k8国际首页': this.$router.push('/index')
break
case '店铺': this.$router.push('/shop')
break
case '创业直播': 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;
}
}
本文已被整理到了《
关于
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。
总结
以上是ag凯发k8国际为你收集整理的状态输出导航栏html,vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： android适配华为手机,华为mate
- 下一篇：