详解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等比例缩小图片尺寸的实例
Feb 27 Javascript
使用angular写一个hello world
Jan 23 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python中模块string.py详解
2017/03/12 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
python 5个实用的技巧
2020/09/27 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
服务员自我评价
2014/01/25 职场文书
个人股份合作协议书
2014/10/24 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python