uniapp制作--简单的tab切换

news2024/11/16 9:31:19

一、实现思路

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

二、实现步骤

①view部分展示

	<!-- tab选项 -->
		<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>

代码解释：

<view :key="index" :class="['table-item', item.default ? 'table-item-active': '']"
                           :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中样式展示

// <!-- tab选项 -->
	.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;
			}
		}
	}