案例展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/18c7def73f49ec31256662fa758f5958.png)
案例代码
<view class="tablist">
<block v-for="(item,index) in tabList" :key="index">
<view class="tabItem" :class="current == item.id?'active':''" @click="changeTab(item)">
{{item.name}}
</view>
</block>
</view>
const tabList = ref([{
id: 1,
name: '收入'
}, {
id: 2,
name: '支出'
}])
const current = ref(1)
function changeTab(item) {
current.value = item.id
}
.tablist {
display: flex;
width: 229rpx;
height: 56rpx;
border-radius: 60rpx;
border: 1rpx solid #FFFFFF;
.tabItem {
width: 122rpx;
height: 56rpx;
border-radius: 60rpx;
font-size: 28rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
.active {
color: var(--theme-color);
background-color: #ffffff;
}
}
案例2
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e87cf5a9bf0e9672b14416a7db0bc6f.png)
代码
<view class="tabList">
<block v-for="(item,index) in tabList" :key="index">
<view :class="{'tabItem':true,'active':current == item.value}" @click="changeTab(item)">
{{item.name}}
</view>
</block>
</view>
const tabList = ref([{
value: 1,
name: '商品'
}, {
value: 2,
name: '优惠券'
}])
const current = ref(1)
function changeTab(item) {
current.value = item.value
}
.tabList {
height: 95rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(223, 223, 223, 0.3);
border-radius: 15rpx;
display: flex;
justify-content: space-between;
align-items: center;
.tabItem {
height: 100%;
flex: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 34rpx;
color: #898989;
position: relative;
}
.tabItem:last-child::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1rpx;
height: 50rpx;
background: #BBBBBB;
}
.active {
position: relative;
font-weight: bold;
color: #3D3D3D;
}
.active::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 101rpx;
height: 5rpx;
background: #F364B3;
border-radius: 6rpx 6rpx 6rpx 6rpx;
}
}