案例展示
文章来源地址https://www.toymoban.com/news/detail-637196.html
案例代码
<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;
}
}
文章来源：https://www.toymoban.com/news/detail-637196.html
到了这里，关于uni——tab切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
