blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-08-30 20:59:47 +08:00
Code Issues Projects Releases Wiki Activity

feat(Tabs): adjust default line-width to 40px (#3518)

Browse Source
This commit is contained in:
neverland 2020-08-13 20:55:48 +08:00 committed by GitHub
parent 6f2d5a78f1
commit 3634840bb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tab/README.md
View File

@ -193,7 +193,7 @@ Page({
| type | 样式风格，可选值为`card` | _string_ | `line` | - | | type | 样式风格，可选值为`card` | _string_ | `line` | - |
| border | 是否展示外边框，仅在`line`风格下生效 | _boolean_ | `true` | - | | border | 是否展示外边框，仅在`line`风格下生效 | _boolean_ | `true` | - |
| duration | 动画时间 (单位秒) | _number_ | `0.3` | - | | duration | 动画时间 (单位秒) | _number_ | `0.3` | - |
| line-width | 底部条宽度 (px) | _string \| number_ | 与当前标签等宽 | - | | line-width | 底部条宽度 (px) | _string \| number_ | `40px` | - |
| line-height | 底部条高度 (px) | _string \| number_ | `3px` | - | | line-height | 底部条高度 (px) | _string \| number_ | `3px` | - |
| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `5` | - | | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `5` | - |
| animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - | | animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - |

7
packages/tabs/index.ts
View File

@ -46,7 +46,7 @@ VantComponent({
swipeable: Boolean, swipeable: Boolean,
lineWidth: { lineWidth: {
type: [String, Number], type: [String, Number],
value: -1, value: 40,
observer: 'setLine', observer: 'setLine',
}, },
lineHeight: { lineHeight: {
@ -245,7 +245,6 @@ VantComponent({
if (rect == null) { if (rect == null) {
return; return;
} }
const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
const height = const height =
lineHeight !== -1 lineHeight !== -1
? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit( ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(
@ -257,7 +256,7 @@ VantComponent({
.slice(0, currentIndex) .slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0); .reduce((prev, curr) => prev + curr.width, 0);
left += (rect.width - width) / 2; left += (rect.width - lineWidth) / 2;
const transition = skipTransition const transition = skipTransition
? '' ? ''
@ -266,7 +265,7 @@ VantComponent({
this.setData({ this.setData({
lineStyle: ` lineStyle: `
${height} ${height}
width: ${addUnit(width)}; width: ${addUnit(lineWidth)};
background-color: ${color}; background-color: ${color};
-webkit-transform: translateX(${left}px); -webkit-transform: translateX(${left}px);
transform: translateX(${left}px); transform: translateX(${left}px);