【微信小程序】vant组件tab标签页标签栏大小自适应改变_van-tabs减少tab间距

---

前言

vant组件v1.9.2，tab组件样式都写为px，更改几处为rpx即可。其他子组件也可这样进行修改。但最好不要直接更改wxss文件，按照官方文档进行样式覆盖，方便以后进行组件更新。

---

一、更改前

机型为iphone5时过大

机型为ipad时又过小

二、更改内容

1.js

tabs/index.js：

lineWidth: {
  type: null,
  value: 40,
  observer: 'resize',
},
// 更改value
lineWidth: {
  type: null,
  value: '75rpx',
  observer: 'resize',
},
1
2
3
4
5
6
7
8
9
10
11

2.wxss

tabs/index.wxss（尽量在app.wxss里进行样式覆盖）：

// 共更改5处地方，数值根据需求自行调整

// 2个容器高度
--tabs-line-height,44px
// 更改为
--tabs-line-height,75rpx

// 标签栏底部
--tabs-bottom-bar-height,3px
// 更改为
--tabs-bottom-bar-height,6rpx

// 标签栏字体
--tab-font-size,14px
// 更改为
--tab-font-size,28rpx

// 标签栏.van-tab每个标签的padding
padding:0 5px;
// 更改为
padding:0 10rpx;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

三、更改后

iphone5

ipad