需求:改变Tab标签下的border的的长度
思路:使用伪元素,定义元素宽度
方式一:为元素添加border
方式二:为元素添加背景颜色(可带圆角,如下图)
效果:
代码:
<template>
<view class="tab">
<view :class="['item', tabIndex==0?'active':'']" @click="handleTab(0)">
音乐
</view>
<view :class="['item', tabIndex==1?'active':'']" @click="handleTab(1)">
播客
</view>
<view :class="['item', tabIndex==2?'active':'']" @click="handleTab(2)">
动态
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: 0
}
},
methods: {
handleTab(index) {
this.tabIndex = index
}
}
}
</script>
<style lang="scss">
.tab {
display: flex;
margin-top: 20rpx;
.item {
flex: 1;
height: 70rpx;
text-align: center;
color: rgba(173, 173, 173, 1);
font-size: 30rpx;
font-weight: 400;
line-height: 58rpx;
}
.active {
color: rgba(255, 0, 0, 1);
text-align: center;
}
.active::after {
content: '';
width: 15%;
height: 4rpx;
display: block;
margin: 0 auto;
padding: 1px;
// 方案一: 通过border-bottom实现
// border-bottom: 4px solid rgba(255, 0, 0, 1);
// 方案二: 通过background-color实现 (可带圆角)
background-color: rgba(255, 0, 0, 1);
border-radius: 4rpx;
}
}
</style>