vue自定义标签页/自定义切换页/uniapp

前端vue项目自定义标签切换页  B端C端H5都可！！小程序项目 如果限制不让使用组件时 就要自己手写很多东西了  下面是自定义的一个标签切换页

顶部的位置是我做的固定的 因为做上拉下拉事件 滚动刷新数据  当然切换时那个白色切条也要切换  那就要跟点击事件同步了 所以绑定同一个点击事件 给个类型 点击后给赋值 定义的cur class名 相当于当点击为哪个时就显示哪个  后端类型传参的时候 直接传this.isNav就ok

html:

<view class="header">
			<view class="nav">
				<view class="box" :class="{'cur':isNav==1}" @click="changeNav(1)">
					<view class="text">未使用</view>
					<view class="icon"></view>
				</view>
				<view class="box" :class="{'cur':isNav==2}" @click="changeNav(2)">
					<view class="text">已使用</view>
					<view class="icon"></view>
				</view>
				<view class="box" :class="{'cur':isNav==3}" @click="changeNav(3)">
					<view class="text">已过期</view>
					<view class="icon"></view>
				</view>
               <!--  样式也可这样写-->
				<!-- <view class="box" :class="isNav==3?'cur':''" @click="changeNav(3)">
					<view class="text">已过期</view>
					<view class="icon"></view>
				</view> -->
			</view>
		</view>

 data:

data() {
			return {
				isNav: 1,                 //1未使用 2已使用 3已失效
			}
		},


methods：{
        // tab切换
		changeTab(index){
			this.isNav= index;            //传后端类型直接传this.isNav
			this.mescroll.resetUpScroll(); //每切换一次调一下刷新接口
		},
}

css:

.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: var(--window-top); /* css变量 */
		left: 0rpx;
		z-index: 990;
		font-size: 24rpx;
		background-color: #F84B3C;
		box-shadow: 0 2rpx 10rpx 5rpx rgba(225, 225, 235, 0.5);
	}
	.header .nav{
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		color: white;
	}
	.header .nav .box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.header .nav .box .text {
		height: 78rpx;
		line-height: 78rpx;
		font-size: 28rpx;
	}
	
	.header .nav .box .icon {
		width: 68rpx;
		height: 4rpx;
		background-color: white;
		justify-self: flex-end;
		justify-self: end;
		display: none;
		border-radius: 4px 4px 0px 0px;
	}
	
	.header .nav .box.cur .text {
		font-weight: bold;
	}
	
	.header .nav .box.cur .icon {
		display: block;
	}

做成按钮点击也行 逻辑相同 具体样式颜色宽高可自行修改！