vue实现nav导航栏的方法
作者:羞羞的铁拳 发布时间:2024-05-09 15:18:22
标签: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 }
来看一下最终的结果,很完美。
来源:http://blog.csdn.net/wang1006008051/article/details/78040862


猜你喜欢
- -- SQL Server 2000 SELECT a.name AS 字段名, CASE WHEN EXISTS (SELECT 1 FR
- 一、多线程间的资源竞争以下列task1(),task2()两个函数为例,分别将对全局变量num加一重复一千万次循环(数据大一些,太小的话执行
- 一 在写之前 最好指定python的路径:#!/usr/bin/pythonpython 在linux中需要添加编码方式:以免出现中文乱码#
- 在实际数据分析和建模过程中,我们通常需要从数据库中读取数据,并将其转化为 Pandas dataframe 对象进行进一步处理。而 MySQ
- 关于这个话题,我也看到网上有其他方法来解决。 不过从性能和代码量上来看,我有更好的办法。 在这里和大家 分享。 原理其实很简单, 知识1、长
- 一、概述面向对象编程 (OOP) 语言的一个主要功能就是“继承”。继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类
- Linux终端中的操作均是使用命令行来进行的。因此,对于小白来说,熟记几个基本的命令行和使用方法能够较快的在Linux命令行环境中将pyth
- 译者按:原文写于2011年末,虽然文中关于Python 3的一些说法可以说已经不成立了,但是作为一篇面向从其他语言转型到Python的程序员
- 本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下html<dl id="marquee" class
- /* 建立数据表 */ create table td_base_data( id int(10) not null auto_increm
- 【原文地址】 Recipe: Deploying a SQL Database to a Remote Hosting Environmen
- jupyter notebook更换皮肤主题视频地址:https://www.bilibili.com/video/BV1Et4y1D7ru
- 高阶函数是在Python中一个非常有用的功能函数,所谓高阶函数就是一个函数可以用来接收另一个函数作为参数,这样的函数叫做高阶函数。pytho
- 感谢人类方方面面的创新,今天Web开发已经不需要在如何设计网站上面浪费时间了。框架和库帮助web开发者得以专注于真正的开发工作上。下面的这些
- 最近有同学询问如何利用Python处理xml文件,特此整理一个比较简洁的操作手册,供大家参阅。首先准备一个xml文件,xml中的内容如下所示
- 1.第一种就是直接调用 window.print()方法这种方法的坏处就是 默认打印整个页面,不能打印局部页面。2.第二种使用v-print
- 废话真的一句也不想多说,直接看代码吧!# -*- coding: utf-8 -*- import numpy from sklearn i
- Django文件上传,供大家参考,具体内容如下需求1、完成学生信息注册操作2、将学生信息入库3、将上传文件存放至项目下media文件夹下4、
- 首先,打开MSSQL2008,然后在“管理”大类中,双击“维护计划”子类,这时候,如果以前设置过任务计划的,就会显示出任务列表;如果没有,那
- 我准备在ASP中连接MYSQL了,请问如何做?首先要正确安装MYSQLX,装好之后,可调用以下程序即可正常访问MYSQL:<%@&nb