实现效果图：
组件UI：Vant Weapp
用到的API：
代码：
wxml：
<van-tabs color='#ccc' active="{{ active }}" bind:change="onChange" tab-class='tabSon' tab-active-class='activeTab' title-inactive-color='#333' title-active-color='#fff' nav-class='tabInvoice' class="tabsCapsule">
<van-tab title="标签 1">内容一</van-tab>
<van-tab title="标签 2">内容二</van-tab>
<van-tab title="标签 3">内容三</van-tab>
</van-tabs>
js：
data: {
active: 1,
},
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.name}`,
icon: 'none',
});
},
json：文章来源：https://www.toymoban.com/news/detail-533198.html
"usingComponents": {
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
}
wxss：文章来源地址https://www.toymoban.com/news/detail-533198.html
// 设置整个标签栏样式
.tabInvoice{
background: #333;
border-radius: 60rpx;
height: 75rpx;
}
// 每个标签的样式
.tabSon{
border-radius: 60rpx;
color: #fff !important;
line-height: 75rpx !important;
}
// 选中标签的样式
.activeTab{
background: #ccc;
line-height: 75rpx !important;
}
到了这里，关于van-tabs样式修改--＞胶囊样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
