好资源导航 » 文章资讯 » 详解Vue底部导航栏组件

详解Vue底部导航栏组件

2023-08-23 23:31:04 80

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




	
	exportdefault{
		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"
				}]
			}
		}
	}

:src="http://www.haoziyuan.ccindex===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;
	}
	divimg{
		width:30px;
		height:30px;
	}
	divp{
		color:black;
	}
	.on{
		color:red;
	}

使用方式：

导入：

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

返回顶部
514930285
czq8825@qq.com

详解Vue底部导航栏组件

热门推荐

随机推荐