详解Vue底部导航栏组件


Posted in Javascript onMay 02, 2019

不多说直接上代码 BottomNav.vue:

<template>
	<div class="footer">
		<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">
			<img :src="index===idx?item.iconSelect:item.icon">
			<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>
		</div>
 
	</div>
</template>
 
<script type="text/javascript">
	
	export default{
		props:['idx'],
		data(){
			return {
				items:[{
					cls:"home",
					name:"首页",
					push:"/home",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				},
				{
					cls:"shares",
					name:"股票",
					push:"/shares",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				},
				{
					cla:"community",
					name:"社区",
					push:"/community",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				},
				{
					cla:"mine",
					name:"我的",
					push:"/mine",
					icon:"../static/home.png",
					iconSelect:"../static/home_select.png"
				}]
			}
		}
	} 
 
</script>

:src="index===idx?item.iconSelect:item.icon" 通过代码判断是否是当前页面,选择不通的图片

@click="$router.push(item.push) 跳转到各个页面

Style:

.footer{
	display: flex;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	height: 6rem;
	background: #909090;
	width: 100%;}
	div{
		flex: 1;
		font-size: 30px;
	}
	div img{
		width: 30px;
		height: 30px;
	}
	div p{
		color:black;
	}
	.on{
		color: red;
	}

使用方式:

导入:

<BNai :idx="0">
	 			
</BNai>

以上所述是小编给大家介绍的Vue底部导航栏详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
微信小程序搭建自己的Https服务器
May 02 #Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 #Javascript
详解微信小程序网络请求接口封装实例
May 02 #Javascript
vue 搭建后台系统模块化开发详解
May 01 #Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 #Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 #Javascript
3分钟了解vue数据劫持的原理实现
May 01 #Javascript
You might like
php Ajax乱码
2008/04/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php在线代理转向代码
2012/05/05 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
python实现复制整个目录的方法
2015/05/12 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
最新的互联网创业计划书
2014/01/10 职场文书
养殖项目策划书范文
2014/01/13 职场文书
校园安全广播稿
2014/02/08 职场文书
流动人口婚育证明
2014/10/19 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年绿化工作总结
2014/12/09 职场文书
自荐信模板大全
2015/03/27 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
红楼梦读书笔记
2015/06/25 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫