van-tabs样式修改--＞胶囊样式

 实现效果图：

 

组件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：

"usingComponents": {
    "van-tab": "@vant/weapp/tab/index",
    "van-tabs": "@vant/weapp/tabs/index"
  }

wxss:

// 设置整个标签栏样式
.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;
}