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中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
无线电广播的开始
2002/01/30 无线电
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
jquery 问答知识整理
2010/02/11 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JS实现购物车特效
2017/02/02 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python中Collection的使用小技巧
2014/08/18 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
django和vue实现数据交互的方法
2019/08/21 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
信息部岗位职责
2013/11/12 职场文书
正科级干部考察材料
2014/05/29 职场文书
运动会口号大全
2014/06/07 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python