uniapp制作--简单的tab切换-编程知识

uniapp制作--简单的tab切换

一、实现思路

在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}],//方法，在methodsmethods: {//点击tab跳转changeStatus(item) {let obj = this.changeList.find(v => v.default)if (obj) {obj.default = falseitem.default = true}this.tabIndex = item.idif (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;}}}