vue router 底部导航栏功能（不使用icon）

最新推荐文章于 2024-09-15 08:30:50 发布

肉嘟嘟_

最新推荐文章于 2024-09-15 08:30:50 发布

阅读量1.2k

点赞数 1

分类专栏：项目案例

本文链接：https://blog.csdn.net/cq7421/article/details/82347935

版权

项目案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>
	<div class="footer">
		<div v-for='(item,index) of items' :class='[item.type,{selectedTab:index === indexType}]' @click="$router.push(item.push)">
			<img :src="index===indexType?item.iconSelect:item.icon">
			<p :class="['colorChange',{selectedTab:index===indexType}]">{{item.name}}</p>
		</div>

	</div>
</template>

js 注意的是，引用图片的时候，有些不加require，图片显示不出来

export default {
		props: ['indexType'],
		data() {
			return {
				items: [{
						type: "Home",
						name: "首页",
						push: "/Home",
						icon: require("../img/index.png"),
						iconSelect: require("../img/index_selected.png")
					},
					{
						cla: "Member",
						name: "社区",
						push: "/Member",
						icon: require("../img/wallet.png"),
						iconSelect: require("../img/wallet_selected.png")
					},
					{
						cla: "Me",
						name: "我的",
						push: "/Me",
						icon: require("../img/mine.png"),
						iconSelect: require("../img/mine_selected.png")
					}
				]
			}
		}
	}

css样式

<style lang="scss" scoped>
	$browser-default-font-size: 37.5px !default; //变量的值可以根据自己需求定义
	@function pxTorem($px) {
		//$px为需要转换的字号
		@return $px/$browser-default-font-size*1rem;
	}
	
	p {
		margin: 0;
		padding: 0;
	}
	
	.footer {
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding-top: pxTorem(5px);
		border-top: pxTorem(1px) solid #dfdfdf;
		width: 100%;
		div {
			flex: 1;
			-webkit-box-orient: vertical;
			font-size: pxTorem(16px);
			text-align: center;
			img {
				width: pxTorem(45px);
				height: pxTorem(45px);
				margin-top: pxTorem(10px);
			}
			p {
				color: #9f9f9f;
			}
		}
		.selectedTab {
			color: #ac1832;
		}
	}
</style>

使用时

<template>
	<div class="home">
        //使用
		<tabs :indexType="0"></tabs>
	</div>
</template>

<script>
	import tabs from '@/components/tab'
	export default {
		components: {
			tabs
		}
	}
</script>