uniapp选项卡选中的时候改变颜色
时间: 2023-09-01 12:13:01 浏览: 160
您可以使用CSS样式来改变选项卡选中时的颜色,例如:
```
<template>
<view class="tab">
<view class="tab-item" :class="{'active': activeTab === 1}" @click="activeTab = 1">Tab 1</view>
<view class="tab-item" :class="{'active': activeTab === 2}" @click="activeTab = 2">Tab 2</view>
<view class="tab-item" :class="{'active': activeTab === 3}" @click="activeTab = 3">Tab 3</view>
</view>
</template>
<style>
.tab {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
.tab-item {
padding: 10px;
color: #666;
}
.active {
color: #f00; /* 选中时的颜色 */
border-bottom: 2px solid #f00; /* 选中时的下划线颜色 */
}
</style>
<script>
export default {
data() {
return {
activeTab: 1
}
}
}
</script>
```
在上面的示例中,当选项卡被点击并设置为活动状态时,`.active`类会被应用到选项卡上,这将更改其颜色和下划线颜色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)