blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-09-06 16:09:44 +08:00
Code Issues Projects Releases Wiki Activity

refactor(tab): adjust padding in complete mode (#3459)

Browse Source 
* refactor(tab): adjust padding in complete mode

* docs(tab): update readme
This commit is contained in:
rex 2020-08-07 10:47:33 +08:00 committed by GitHub
parent f5b00be976
commit 2958daf809
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/tab/README.md
View File

@ -55,7 +55,7 @@ Page({
### 横向滚动 ### 横向滚动
多于 4 个标签时，Tab 可以横向滚动 多于 5 个标签时，Tab 可以横向滚动
```html ```html
<van-tabs active="{{ active }}"> <van-tabs active="{{ active }}">
@ -195,7 +195,7 @@ Page({
| duration | 动画时间 (单位秒) | _number_ | `0.3` | - | | duration | 动画时间 (单位秒) | _number_ | `0.3` | - |
| line-width | 底部条宽度 (px) | _string \| number_ | 与当前标签等宽 | - | | line-width | 底部条宽度 (px) | _string \| number_ | 与当前标签等宽 | - |
| line-height | 底部条高度 (px) | _string \| number_ | `3px` | - | | line-height | 底部条高度 (px) | _string \| number_ | `3px` | - |
| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `4` | - | | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | _number_ | `5` | - |
| animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - | | animated | 是否使用动画切换 Tabs | _boolean_ | `false` | - |
| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | - | | ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | - |
| sticky | 是否使用粘性定位布局 | _boolean_ | `false` | - | | sticky | 是否使用粘性定位布局 | _boolean_ | `false` | - |

16
packages/tabs/index.less
View File

@ -12,6 +12,18 @@
&--scrollable { &--scrollable {
.van-tab { .van-tab {
flex: 0 0 22%; flex: 0 0 22%;
&--complete {
flex: 1 0 auto !important;
padding: 0 @padding-sm;
}
}
.van-tabs__nav {
&--complete {
padding-right: 8px;
padding-left: 8px;
}
} }
} }
} }
@ -125,10 +137,6 @@
.theme(color, '@tab-disabled-text-color'); .theme(color, '@tab-disabled-text-color');
} }
&--complete {
flex: 1 0 auto !important;
}
&__title { &__title {
&__info { &__info {
position: relative !important; position: relative !important;

13
packages/tabs/index.ts
View File

@ -87,7 +87,7 @@ VantComponent({
}, },
swipeThreshold: { swipeThreshold: {
type: Number, type: Number,
value: 4, value: 5,
observer(value) { observer(value) {
this.setData({ this.setData({
scrollable: this.children.length > value || !this.data.ellipsis scrollable: this.children.length > value || !this.data.ellipsis
@ -238,9 +238,8 @@ VantComponent({
lineHeight lineHeight
} = this.data; } = this.data;
this.getRect('.van-tab', true).then( this.getRect(`.van-tab--${currentIndex}`).then(
(rects: WechatMiniprogram.BoundingClientRectCallbackResult[] = []) => { (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
const rect = rects[currentIndex];
if (rect == null) { if (rect == null) {
return; return;
} }
@ -252,11 +251,7 @@ VantComponent({
)};` )};`
: ''; : '';
let left = rects const left = rect.left + (rect.width - width) / 2;
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
left += (rect.width - width) / 2;
const transition = skipTransition const transition = skipTransition
? '' ? ''

4
packages/tabs/index.wxml
View File

@ -19,13 +19,13 @@
class="{{ utils.bem('tabs__scroll', [type]) }}" class="{{ utils.bem('tabs__scroll', [type]) }}"
style="{{ color ? 'border-color: ' + color : '' }}" style="{{ color ? 'border-color: ' + color : '' }}"
> >
<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}"> <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" /> <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
<view <view
wx:for="{{ tabs }}" wx:for="{{ tabs }}"
wx:key="index" wx:key="index"
data-index="{{ index }}" data-index="{{ index }}"
class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}" class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', ['' + index, { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }]) }}"
style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}" style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
bind:tap="onTap" bind:tap="onTap"
> >