案例展示

案例代码

<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;}
}