uniapp制作--简单的tab切换

一、实现思路

                在UniApp中，可以使用v-if来控制Tab栏并进行切换。  创建一个方法来控制点击时的效果。      

二、实现步骤

        ①view部分展示

	
		<view class="select-area">
			<view class="select-top">
				<view class="course-table">
					<template v-for="(item,index) in changeList">
						<view :key="index" :class="['table-item', item.default ? 'table-item-active': '']"
							:style="{borderRadius: index == 0 ? '64rpx 0 0 64rpx' : '0 64rpx 64rpx 0'}"
							@click="changeStatus(item)">{{ item.title }}view>
					template>
				view>
			view>
		view>
 
 
	    <view v-if="tabIndex === 0" style="padding: 32rpx">
            00
		view>
 
		<view v-if="tabIndex === 1" style="padding: 32rpx">
	        11
		view>

代码解释：        

                            :style="{borderRadius: index == 0 ? '64rpx 0 0 64rpx' : '0 64rpx 64rpx 0'}"

 Vue/uni-app 中的模板语法，用于渲染一个列表中的每个项目，并根据项目的属性动态设置样式。
        :key="index"：这是 Vue/uni-app 中的列表渲染时必须的属性，用于给每个列表项分配唯一的键。在这里，使用了列表项的索引作为键。
        :class="['table-item', item.default ? 'table-item-active': '']"：这是一个动态类绑定，根据 item 对象的 default 属性的值来决定是否添加 table-item-active 类。如果 item.default 为真，则添加 table-item-active 类；否则不添加。无论如何，都会添加 table-item 类。
        :style="{borderRadius: index == 0 ? '64rpx 0 0 64rpx' : '0 64rpx 64rpx 0'}"：这是一个动态样式绑定，根据当前列表项的索引来决定边框圆角的样式。如果当前索引是第一个项（index == 0），则设置左上角和左下角的圆角为 64rpx；否则设置右上角和右下角的圆角为 64rpx。
综合起来，这段代码的作用是渲染一个列表中的项目，并根据项目的属性动态设置类和样式。

        ②JavaScript 内容

                

	            tabIndex: 0,
				changeList: [{
						id: 0,
						title: '教务管理',
						default: true
					},
					{
						id: 1,
						title: '学工管理',
						default: false
					}
				],
 
            
            //方法，在methods
    methods: {
 
	        //点击tab跳转
			changeStatus(item) {
				let obj = this.changeList.find(v => v.default)
				if (obj) {
					obj.default = false
					item.default = true
				}
				this.tabIndex = item.id
				if (this.tabIndex == 0 && this.token) {
					this.getScheduleList()
				} else if (this.tabIndex == 1 && this.token) {
					this.getPracticeList()
				}
			},
}

        ③css中样式展示

// 
	.select-area {
		padding: 0 0 12rpx 0;
		background-color: #fff;
	}
 
	.select-top {
		position: relative;
		width: 100%;
		height: 88rpx;
 
		.course-table {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
			width: 408rpx;
			height: 64rpx;
			background-color: #fff;
			border-radius: 64rpx;
			border: 2rpx solid #5990F5;
 
			// overflow: hidden;
			.table-item {
				letter-spacing: 2rpx;
				width: 50%;
				line-height: 64rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				color: #5990F5;
				text-align: center;
			}
 
			.table-item-active {
				color: #fff;
				border: 2rpx solid transparent;
				background-color: #5990F5;
			}
		}
	}

三、效果展示

   

以上是一个简单的tab切换，主要使用了三元一次式来提交点击跳转时的样式。