欢迎访问 生活随笔!

凯发k8官方网

当前位置: 凯发k8官方网 > 前端技术 > vue >内容正文

vue

状态输出导航栏html,vue实现导航栏效果(选中状态刷新不消失)-凯发k8官方网

发布时间:2024/10/8 vue 0 豆豆
凯发k8官方网 收集整理的这篇文章主要介绍了 状态输出导航栏html,vue实现导航栏效果(选中状态刷新不消失)_百厌_前端开发者... 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1、首先把这些小图片放到src/assets路径下面(自动base64编码)

2、在data()里边定义一个选中对应的变量isselect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选中的图片地址。  注意:图片的地址不要直接写,直接写就是字符串,不仅会出现显示不出图片的情况,而且打包之后,还是这里地址,不会变。使用webpack提供的require引入图片地址就可以解决以上问题。

data () {

return {

isselect: '凯发k8官方网首页',

nav: [

{title: '凯发k8官方网首页', url: require('../../assets/common/凯发k8官方网首页@2x.png'), url_one: require('../../assets/common/凯发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 '凯发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)

}

}

但是电脑调试的时候会发现,刷新浏览器后,选中的状态就会消失。(你可能会觉得用户一般不会在手机端刷新页面/或者直接输入路由跳转到相应的页面,如果要追求完美的,请继续往下看)比如,我选中的状态是创业直播:

当我点击刷新页面后,就会返回到默认的凯发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: '凯发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: '凯发k8官方网首页',

nav: [

{title: '凯发k8官方网首页', url: require('../../assets/common/凯发k8官方网首页@2x.png'), url_one: require('../../assets/common/凯发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 '凯发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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

总结

以上是凯发k8官方网为你收集整理的状态输出导航栏html,vue实现导航栏效果(选中状态刷新不消失)_百厌_前端开发者...的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。

网站地图