状态输出导航栏html,Vue实现导航栏效果(选中状态刷新不消失)_百厌_前端开发者...
用
1、首先把这些小图片放到src/assets路径下面(自动base64编码)
2、在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选中的图片地址。 注意:图片的地址不要直接写,直接写就是字符串,不仅会出现显示不出图片的情况,而且打包之后,还是这里地址,不会变。使用webpack提供的require引入图片地址就可以解决以上问题。
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')}
]
}
},
{{item.title}}
在methods中定义这个事件
methods: {
selectNav (title) {
this.isSelect = title
}
3、这个方法里还可以根据title的值去跳转到相应的路由,这样一个基本的底部导航栏就是实现了。
methods: {
selectNav (title) {
this.isSelect = title
switch (title) {
case '首页': 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)
}
}
但是电脑调试的时候会发现,刷新浏览器后,选中的状态就会消失。(你可能会觉得用户一般不会在手机端刷新页面/或者直接输入路由跳转到相应的页面,如果要追求完美的,请继续往下看)比如,我选中的状态是创业直播:
当我点击刷新页面后,就会返回到默认的首页状态,如下。
解决办法:
每次点击切换底部导航的时候,把选中的状态存入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: '首页',
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: '首页',
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')}
]
}
},
mounted () {
this.isSelect = this.$route.name
},
methods: {
selectNav (title) {
this.isSelect = this.$route.name
switch (title) {
case '首页': 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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。
状态输出导航栏html,Vue实现导航栏效果(选中状态刷新不消失)_百厌_前端开发者...相关推荐
- UITextField实现过滤选中状态拼音
先提供下简书地址, 排版更好. 我的简书地址: http://www.jianshu.com/p/80e79c6d1511 UITextField相信很多的iOS开发者都会经常用到, 最近项目中遇到了 ...
- vue底部导航栏(选中状态刷新不消失)解决
我们用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标是我自己找的,选中和未 ...
- Vue 实现导航栏滑到顶部固定,滑动到相应位置导航栏有相应选中效果,点击导航跳转到对应位置
主要思路 导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值,超过了就证明导航栏到达了顶部,给导航栏添加固定样式的类名,注意:需要拿到导航栏固定前的offsetTop值,固定后的offse ...
- vue制作导航栏html,vue实现nav导航栏的方法
vue实现nav导航栏的方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue实现nav导航栏的方法,编程之家小编觉得挺不错的,现在分 ...
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
- 在同一个页面切换导航栏保持正确选中状态(单页面)
方法一:触发点击事件 选中状态class是active, $(function(){ $(".clearfix li").click(function() { ...
- android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航 内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
最新文章
- 光立方原理讲解_一分钟讲解光模块原理与结构
- 用C语言解“然后是几点”问题
- JVM资源分析工具jprofiler使用简介
- 信捷伺服刚性调整_伺服系统增益协调的作用及举例说明,文末有伺服产品调试学习PPT!...
- 晒晒一个多月的seo小成就
- 数学建模学习笔记——插值算法
- Day 7: GruntJS 在线重载 提升生产率至新境界
- matlab 提取数列里非零_什么!科研交流免费教Matlab?
- 对TypeScript进行研究
- 数据库 创建 / 查看/ 删除
- python偶数分解成两个素数之和_偶数 2021218918 ,有多少种方法分解成两个素数之和?...
- bp神经网络预测未来五年数据_基于小波神经网络的数据中心KPI预测
- Theano at a Glance
- linux下phpmyadmin安装
- 有用的网页链接的整合(不定时更新)
- android 隐藏系统音量的接口_Android9.0 系统默认配置清单
- Markdown编辑器对比分析
- tftp目录linux目录,tftp命令指定下载目录,2步完成tftp命令传输文件
- 如何下载OpenJDK安装版本
- 利用媒体查询实现仿星巴克首页布局页面
热门文章
- 如何在钉钉上开发自己的应用_神操作!老妈让我告诉老板,双十一买钉钉。
- Java中在一个字符串的固定位置插入字符串
- 计算机乘除法运算中部分积和余数的符号位选择与位移的关系
- 域名系统DNS、文件传送协议FTP、动态主机配置协议DHCP、远程登录协议TELNET、电子邮件协议(SMTP/POP3/IMAP)、常用端口
- 51单片机系列命名规则
- 为什么尽量使用常量引用
- nfs上安装oracle,使用NFS安装oracle软件
- 超低延迟直播架构解析
- 杭电c语言课程设计实验7,杭电1072 BFS 大神给看看啊 郁闷整整10个小时了 不知道哪里错wa...
- c语言编程TLC2543AD采集,AD转换器TLC2543编程