Uniapp Tab栏切换

最新推荐文章于 2024-08-05 09:27:13 发布

发呆的小蔡°

最新推荐文章于 2024-08-05 09:27:13 发布

阅读量6.2k

点赞数 12

分类专栏： uni-App 文章标签： vue

本文链接：https://blog.csdn.net/Shivy_/article/details/113996124

版权

uniapp Tab栏内容切换 Vue.js 前端开发

关键词由CSDN通过智能技术生成

uni-App 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

介绍

在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>