在Vue或UniApp开发中，圆角选项卡可以用来做分类切换、标签页导航等。要让选项卡带圆角，并且选中和未选中显示不同颜色，关键是使用动态class绑定和状态变量控制。下面通过一个简单示例说明具体做法。
实现思路
我们用一个数组保存选项卡数据，用一个变量记录当前选中的索引。在模板中通过v-for循环渲染每一个选项，根据是否选中动态添加不同的样式类，圆角通过CSS的border-radius设置，颜色差异通过不同类的背景和文字颜色实现。
示例代码
Vue单文件组件写法
以下代码可在普通Vue项目中使用，如果是UniApp，把样式中的px换成rpx即可。
<template>
<div class="tab-wrap">
<div
v-for="(item, index) in tabs"
:key="index"
:class="['tab-item', activeIndex === index ? 'active' : '']"
@click="activeIndex = index">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 选项卡文本
tabs: ['推荐', '热门', '最新'],
// 当前选中索引
activeIndex: 0
}
}
}
</script>
<style scoped>
.tab-wrap {
display: flex;
gap: 12px;
}
.tab-item {
padding: 8px 16px;
border-radius: 20px;
background: #f0f0f0;
color: #666;
font-size: 14px;
}
.tab-item.active {
background: #007aff;
color: #fff;
}
</style>
UniApp中的写法
在UniApp里结构类似，只是样式单位推荐用rpx适配不同屏幕。
<template>
<view class="tab-wrap">
<view
v-for="(item, index) in tabs"
:key="index"
:class="['tab-item', activeIndex === index ? 'active' : '']"
@tap="activeIndex = index">
{{ item }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: ['全部', '待付款', '已完成'],
activeIndex: 0
}
}
}
</script>
<style scoped>
.tab-wrap {
display: flex;
flex-direction: row;
}
.tab-item {
padding: 10rpx 24rpx;
border-radius: 30rpx;
background: #eeeeee;
color: #333333;
margin-right: 16rpx;
font-size: 28rpx;
}
.tab-item.active {
background: #ff5500;
color: #ffffff;
}
</style>
关键点说明
- 使用
border-radius设置圆角，数值越大圆角越明显。 - 用
activeIndex变量记录选中项，点击时修改它。 - 通过对象或数组语法动态切换class，从而改变颜色。
- UniApp中用
@tap代替@click更贴合移动端。
小结
制作圆角选项卡并区分选中与未选中颜色，本质就是状态加样式绑定。掌握上面的模式后，你可以轻松扩展成滑动指示条、动画过渡等更丰富的效果。