Uniapp Tab栏切换

介绍在uniapp当中 , 制作 Tab栏, 当点击对应的标题时, 下面的内容对应跟着改变。效果图主要代码html部分代码<view class="tab_nav"><view class="navTitle" v-for="(item,index) in navList" :key="index" ><view :class="{'active':isActive

发呆的薇薇°

6136人浏览 · 2021-02-23 17:21:14

发呆的薇薇° · 2021-02-23 17:21:14 发布

介绍

在uniapp当中 , 制作 Tab栏, 当点击对应的标题时, 下面的内容对应跟着改变。

效果图

在这里插入图片描述

主要代码

html 部分代码

<view class="tab_nav">
	<view class="navTitle" v-for="(item,index) in navList" :key="index" >
		<view :class="{'active':isActive === index}" @click="checked(index)">
			{{item.title}}
		</view>
	</view>
</view>
<view class="nav_item" v-if="isActive==0">
	0
</view>
<view class="nav_item" v-if="isActive==1">
	1
</view>
<view class="nav_item" v-if="isActive==2">
	2
</view>

css代码

.tab_nav{
	display: flex;
	justify-content: center;
	align-items: center;
}
.tab_nav  .navTitle {
	height: 90rpx;
	line-height: 90rpx;
	width: 100%;
	text-align: center;
	font-size: 32rpx;
	font-family: Alibaba PuHuiTi;
	color: #333;
}
.active {
	position: relative;
	color: #1F75FE;
}
.active::after {
	content: "";
	position: absolute;
	width: 100rpx;
	height: 4rpx;
	background-color: #1F75FE;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin: auto;
}

js代码

<script>
	export default {
		data() {
			return {
				isActive: 0,
				navList:[
					{
						index: 0,
						title: '标题一'
					},{
						index: 1,
						title: "标题二"
					},{
						index: 2,
						title: "标题三"
					}
				]
			}
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
		}
	}
</script>