uni-app导航栏切换

最新推荐文章于 2024-04-13 16:14:03 发布

冯不疯先生

最新推荐文章于 2024-04-13 16:14:03 发布

阅读量852

点赞数 2

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/qq_58437833/article/details/120004641

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

给每一个nav_title加一个click点击事件，并传一个具体形参；（当然跟着移动的下划线是伪元素写的）
在methods里this.isActive = 形参,然后在 :class="{'active':isActive==1}"条件显示；

在nav_item，做一个v-if="isActive==1"

<template>
	<view>
		<!-- nav -->
		<view class="nav">
			<view class="flex_between">
				<view class="nav_title" v-for="item in nav">
					<view :class="{'active':isActive==item.isActive}" @click="chenked(item.isActive)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- nav-item -->
		<view class="nav_item" v-if="isActive==1">
			11
		</view>
		<view class="nav_item" v-if="isActive==2">
			222
		</view>
		<view class="nav_item" v-if="isActive==3">
			333
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				nav:[
					{name:'商品',isActive:1},
					{name:'评价',isActive:2},
					{name:'详情',isActive:3},
				],
				isActive: 1
			};
		},
		onShow() {

		},
		onLoad(params) {

		},
		methods: {
			//切换nav
			chenked(type) {
				this.isActive = type
			},
		
		},
	}
</script>

.nav {
			border-top: 1rpx solid #f2f2f2;
			background-color: #fff;

			.flex_between {
				display: flex;

				.nav_title {
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: "PingFang";
					color: rgb(102, 102, 102);
				}
			}
		}
		.active {
				position: relative;
				color: #31d378;
			}
		
			.active::after {
				content: "";
				position: absolute;
				width: 100rpx;
				height: 4rpx;
				background-color: #31d378;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;
		
			}