vue实现nav导航栏的方法


Posted in Javascript onDecember 13, 2017

每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的。但是要写出代码量少,冗余度低的代码就要动脑子思考一下了。

最近写了一个百度地图的项目,要求底部有一个导航栏。具体如下图:

vue实现nav导航栏的方法

首先,拿到了底部导航栏的所有图标图片,图片都有两种。灰色的代表未选中,选中的用带样色的图片替换。

先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav这个数组。数组里边存放着{title:"银行",url:" ",url1:" "},将图片的 src与isSelect进行绑定,并进行判断,如果等于当前的title时即为选中当前的导航,显示选中时的图片url1。

<div class="footer">
 <ul>
 <li v-for="item in footNav" @click="selectMapNav(item.title)">
 <img :src="isSelect === item.title ? item.url1 : item.url" alt="">
 <p>{{item.title}}</p>
 </li>
 </ul>
</div>

样式用的是扩展语言less写的,应该都能看懂,只是简单的嵌套了一下。给这个地步加一个宽为100%,固定的高度。因为要固定在底部显示,所以加了一个固定定位和背景颜色。写的是手机端项目,浏览器都比较新,所以不用考虑兼容问题。大胆的flex布局可以很方便的实现导航栏。

.footer ul{
 width:100%;
 height:50px;
 position:fixed;
 bottom:0;
 z-index:1;
 background-color:#fff;
 display:flex;
 li{
 text-align:center;
 flex:1;
 img{height:23px;width:23px;margin-top:5px;}
 p{font-size:0.1rem;height:15px;line-height:10px;}
 }
}

在vue data () 中定义一个数组,里边存放每一个导航的标题,如‘银行',未选中时显示的图片url,选中时的图片url1。isSelect表示当前选中的,默认选中银行。

isSelect: '银行',
footNav: [{title: '银行', url: '../../../static/baiduMap/23@2x.png', url1: '../../../static/baiduMap/22@2x.png'},
 {title: '公交 ', url: '../../../static/baiduMap/11@2x.png', url1: '../../../static/baiduMap/10@2x.png'},
 {title: '地铁 ', url: '../../../static/baiduMap/13@2x.png', url1: '../../../static/baiduMap/12@2x.png'},
 {title: '教育 ', url: '../../../static/baiduMap/15@2x.png', url1: '../../../static/baiduMap/14@2x.png'},
 {title: '医院 ', url: '../../../static/baiduMap/17@2x.png', url1: '../../../static/baiduMap/16@2x.png'},
 {title: '休闲 ', url: '../../../static/baiduMap/19@2x.png', url1: '../../../static/baiduMap/18@2x.png'},
 {title: '购物 ', url: '../../../static/baiduMap/21@2x.png', url1: '../../../static/baiduMap/20@2x.png'}
]

在methods方法中,写上html中调用的事件。通过html结构层那里的点击事件selectMapNav(item.title)传过来的title赋值给isSelect即可实现导航栏的点击状态的变化。

selectMapNav (title) {
 this.isSelect = title }

来看一下最终的结果,很完美。

vue实现nav导航栏的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
实例分析js事件循环机制
Dec 13 #Javascript
You might like
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php curl模拟post请求小实例
2013/11/13 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
jQuery常用选择器详解
2017/07/17 jQuery
浅谈vue的踩坑路
2017/08/31 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Pycharm设置界面全黑的方法
2018/05/23 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python实现全排列的打印
2018/08/18 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
内容编辑个人求职信
2013/12/10 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2016猴年春节问候语
2015/11/11 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS