mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
feat(Tab): improve the prop of Tab (#2082)
This commit is contained in:
ShuaiKang Zhang
neverland
parent
602fbfb7b4
commit
ee3bf31ff2
@ -3,19 +3,24 @@ import Page from '../../common/page';
|
||||
Page({
|
||||
data: {
|
||||
tabs: [1, 2, 3, 4],
|
||||
tabsMore: [1, 2, 3, 4, 5, 6, 7, 8]
|
||||
tabsMore: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
tabsWithName: [
|
||||
{ name: 'a', index: 1 },
|
||||
{ name: 'b', index: 2 },
|
||||
{ name: 'c', index: 3 }
|
||||
]
|
||||
},
|
||||
|
||||
onClickDisabled(event) {
|
||||
wx.showToast({
|
||||
title: `标签 ${event.detail.index + 1} 已被禁用`,
|
||||
title: `标签 ${event.detail.name} 已被禁用`,
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
title: `切换到标签 ${event.detail.index + 1}`,
|
||||
title: `切换到标签 ${event.detail.name}`,
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
@ -29,7 +34,7 @@ Page({
|
||||
|
||||
onClick(event) {
|
||||
wx.showToast({
|
||||
title: `点击标签 ${event.detail.index + 1}`,
|
||||
title: `点击标签 ${event.detail.name}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<van-tab
|
||||
wx:for="1234"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -12,12 +12,27 @@
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="通过名称匹配">
|
||||
<van-tabs active="a">
|
||||
<van-tab
|
||||
wx:for="{{ tabsWithName }}"
|
||||
wx:key="index"
|
||||
name="{{ item.name }}"
|
||||
title="{{ '标签 ' + item.index }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item.index}}
|
||||
</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="横向滚动">
|
||||
<van-tabs>
|
||||
<van-tab
|
||||
wx:for="123456"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -32,7 +47,7 @@
|
||||
wx:for="123"
|
||||
wx:key="index"
|
||||
disabled="{{ index === 1 }}"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -46,7 +61,7 @@
|
||||
<van-tab
|
||||
wx:for="123"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content-2">
|
||||
{{ '内容' + item }}
|
||||
@ -60,7 +75,7 @@
|
||||
<van-tab
|
||||
wx:for="12"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -74,7 +89,7 @@
|
||||
<van-tab
|
||||
wx:for="1234"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -88,7 +103,7 @@
|
||||
<van-tab
|
||||
wx:for="1234"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -102,7 +117,7 @@
|
||||
<van-tab
|
||||
wx:for="1234"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
>
|
||||
<view class="content">
|
||||
{{ '内容' + item }}
|
||||
@ -122,7 +137,7 @@
|
||||
<van-tab
|
||||
wx:for="1234"
|
||||
wx:key="index"
|
||||
title="{{ '标签' + item }}"
|
||||
title="{{ '标签 ' + item }}"
|
||||
dot="{{ index === 1 }}"
|
||||
info="{{ index === 2 ? 99 : null }}"
|
||||
>
|
||||
|
||||
@ -8,7 +8,7 @@ export function isObj(x: any): boolean {
|
||||
}
|
||||
|
||||
export function isNumber(value) {
|
||||
return /^\d+$/.test(value);
|
||||
return /^\d+(\.\d+)?$/.test(value);
|
||||
}
|
||||
|
||||
export function range(num: number, min: number, max: number) {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
默认情况下启用第一个标签，可以通过`active`设定当前激活的标签索引，在回调参数的`event.detail`中可以取得被点击标签的标题和索引
|
||||
通过`active`设定当前激活标签对应的索引值，默认情况下启用第一个标签
|
||||
|
||||
```html
|
||||
<van-tabs active="{{ active }}" bind:change="onChange">
|
||||
@ -34,13 +34,25 @@ Page({
|
||||
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
title: `切换到标签 ${event.detail.index + 1}`,
|
||||
title: `切换到标签 ${event.detail.name}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 通过名称匹配
|
||||
|
||||
在标签指定`name`属性的情况下，`active`的值为当前标签的`name`，默认启用第一个标签
|
||||
|
||||
```html
|
||||
<van-tabs active="a">
|
||||
<van-tab title="标签 1" name="a">内容 1</van-tab>
|
||||
<van-tab title="标签 2" name="b">内容 2</van-tab>
|
||||
<van-tab title="标签 3" name="c">内容 3</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### 横向滚动
|
||||
|
||||
多于 4 个标签时，Tab 可以横向滚动
|
||||
@ -72,7 +84,7 @@ Page({
|
||||
Page({
|
||||
onClickDisabled(event) {
|
||||
wx.showToast({
|
||||
title: `标签 ${event.detail.index + 1} 已被禁用`,
|
||||
title: `标签 ${event.detail.name} 已被禁用`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
@ -93,7 +105,7 @@ Page({
|
||||
|
||||
### 点击事件
|
||||
|
||||
可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和索引
|
||||
可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和标识符
|
||||
|
||||
```html
|
||||
<van-tabs bind:click="onClick">
|
||||
@ -106,7 +118,7 @@ Page({
|
||||
Page({
|
||||
onClick(event) {
|
||||
wx.showToast({
|
||||
title: `点击标签 ${event.detail.index + 1}`,
|
||||
title: `点击标签 ${event.detail.name}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
@ -158,13 +170,14 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活标签的索引 | *number* | `0` | - |
|
||||
| active | 当前选中标签的标识符 | *string \| number* | `0` | - |
|
||||
| color | 标签颜色 | *string* | `#ee0a24` | - |
|
||||
| z-index | z-index 层级 | *number* | `1` | - |
|
||||
| type | 样式风格，可选值为`card` | *string* | `line` | - |
|
||||
| border | 是否展示外边框，仅在`line`风格下生效 | *boolean* | `true` | - |
|
||||
| duration | 动画时间 (单位秒) | *number* | `0.3` | - |
|
||||
| line-width | 底部条宽度 (px) | *number* | 与当前标签等宽 | - |
|
||||
| line-width | 底部条宽度 (px) | *string \| number* | 与当前标签等宽 | - |
|
||||
| line-height | 底部条高度 (px) | *string \| number* | `3px` | - |
|
||||
| swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | *number* | `4` | - |
|
||||
| animated | 是否使用动画切换 Tabs | *boolean* | `false` | - |
|
||||
| swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - |
|
||||
@ -174,6 +187,7 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 标签名称，作为匹配的标识符 | *string \| number* | 标签的索引值 | - |
|
||||
| title | 标题 | *string* | - | - |
|
||||
| disabled | 是否禁用标签 | *boolean* | `false` | - |
|
||||
| dot | 是否显示小红点 | *boolean* | - | - |
|
||||
@ -197,9 +211,9 @@ Page({
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| bind:click | 点击标签时触发 | index：标签索引，title：标题 |
|
||||
| bind:change | 当前激活的标签改变时触发 | index：标签索引，title：标题 |
|
||||
| bind:disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 |
|
||||
| bind:click | 点击标签时触发 | name：标签标识符，title：标题 |
|
||||
| bind:change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 |
|
||||
| bind:disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 |
|
||||
| bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
@ -11,7 +11,12 @@ VantComponent({
|
||||
info: null,
|
||||
title: String,
|
||||
disabled: Boolean,
|
||||
titleStyle: String
|
||||
titleStyle: String,
|
||||
name: {
|
||||
type: [Number, String],
|
||||
value: '',
|
||||
observer: 'setComputedName'
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
@ -30,6 +35,10 @@ VantComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
setComputedName() {
|
||||
this.computedName = this.data.name || this.index;
|
||||
},
|
||||
|
||||
update() {
|
||||
const parent = this.getRelationNodes('../tabs/index')[0];
|
||||
if (parent) {
|
||||
|
||||
@ -124,18 +124,6 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
&--dot {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
.theme(background-color, '@red');
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: relative !important;
|
||||
top: -1px !important;
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { touch } from '../mixins/touch';
|
||||
import { Weapp } from 'definitions/weapp';
|
||||
import { nextTick } from '../common/utils';
|
||||
import { nextTick, isDef, addUnit } from '../common/utils';
|
||||
|
||||
type TabItemData = {
|
||||
width?: number
|
||||
active: boolean
|
||||
inited?: boolean
|
||||
animated?: boolean
|
||||
name?: string | number
|
||||
};
|
||||
|
||||
type Position = 'top' | 'bottom' | '';
|
||||
@ -21,14 +22,25 @@ VantComponent({
|
||||
name: 'tab',
|
||||
type: 'descendant',
|
||||
linked(child) {
|
||||
this.child.push(child);
|
||||
child.index = this.children.length;
|
||||
child.setComputedName();
|
||||
this.children.push(child);
|
||||
this.updateTabs(this.data.tabs.concat(child.data));
|
||||
},
|
||||
unlinked(child) {
|
||||
const index = this.child.indexOf(child);
|
||||
const index = this.children.indexOf(child);
|
||||
const { tabs } = this.data;
|
||||
tabs.splice(index, 1);
|
||||
this.child.splice(index, 1);
|
||||
this.children.splice(index, 1);
|
||||
|
||||
let i = index;
|
||||
while (i >= 0 && i < this.children.length) {
|
||||
const currentChild = this.children[i];
|
||||
currentChild.index--;
|
||||
currentChild.setComputedName();
|
||||
i++;
|
||||
}
|
||||
|
||||
this.updateTabs(tabs);
|
||||
}
|
||||
},
|
||||
@ -39,16 +51,16 @@ VantComponent({
|
||||
animated: Boolean,
|
||||
swipeable: Boolean,
|
||||
lineWidth: {
|
||||
type: Number,
|
||||
type: [String, Number],
|
||||
value: -1
|
||||
},
|
||||
lineHeight: {
|
||||
type: Number,
|
||||
type: [String, Number],
|
||||
value: -1
|
||||
},
|
||||
active: {
|
||||
type: Number,
|
||||
value: 0
|
||||
type: [String, Number],
|
||||
value: 0,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
@ -83,13 +95,14 @@ VantComponent({
|
||||
scrollable: false,
|
||||
trackStyle: '',
|
||||
wrapStyle: '',
|
||||
position: ''
|
||||
position: '',
|
||||
currentIndex: null,
|
||||
},
|
||||
|
||||
watch: {
|
||||
swipeThreshold() {
|
||||
this.setData({
|
||||
scrollable: this.child.length > this.data.swipeThreshold
|
||||
scrollable: this.children.length > this.data.swipeThreshold
|
||||
});
|
||||
},
|
||||
color: 'setLine',
|
||||
@ -101,14 +114,13 @@ VantComponent({
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.child = [];
|
||||
this.children = [];
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setLine(true);
|
||||
this.setTrack();
|
||||
this.scrollIntoView();
|
||||
|
||||
this.getRect('.van-tabs__wrap').then(
|
||||
(rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
|
||||
this.navHeight = rect.height;
|
||||
@ -132,27 +144,30 @@ VantComponent({
|
||||
this.setActiveTab();
|
||||
},
|
||||
|
||||
trigger(eventName: string, index: number) {
|
||||
trigger(eventName: string, name: string | number) {
|
||||
const { tabs, currentIndex } = this.data;
|
||||
|
||||
this.$emit(eventName, {
|
||||
index,
|
||||
title: this.data.tabs[index].title
|
||||
name,
|
||||
title: tabs[currentIndex].title
|
||||
});
|
||||
},
|
||||
|
||||
onTap(event: Weapp.Event) {
|
||||
const { index } = event.currentTarget.dataset;
|
||||
const child = this.children[index];
|
||||
if (this.data.tabs[index].disabled) {
|
||||
this.trigger('disabled', index);
|
||||
this.trigger('disabled', child.computedName);
|
||||
} else {
|
||||
this.trigger('click', index);
|
||||
this.setActive(index);
|
||||
this.trigger('click', child.computedName);
|
||||
this.setActive(child.computedName);
|
||||
}
|
||||
},
|
||||
|
||||
setActive(active: number) {
|
||||
if (active !== this.data.active) {
|
||||
this.trigger('change', active);
|
||||
this.setData({ active });
|
||||
setActive(computedName) {
|
||||
if (computedName !== this.currentName) {
|
||||
this.currentName = computedName;
|
||||
this.trigger('change', computedName);
|
||||
this.setActiveTab();
|
||||
}
|
||||
},
|
||||
@ -162,16 +177,16 @@ VantComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
const { color, active, duration, lineWidth, lineHeight } = this.data;
|
||||
const { color, duration, currentIndex, lineWidth, lineHeight } = this.data;
|
||||
|
||||
this.getRect('.van-tab', true).then(
|
||||
(rects: WechatMiniprogram.BoundingClientRectCallbackResult[]) => {
|
||||
const rect = rects[active];
|
||||
const rect = rects[currentIndex];
|
||||
const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
|
||||
const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : '';
|
||||
const height = lineHeight !== -1 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` : '';
|
||||
|
||||
let left = rects
|
||||
.slice(0, active)
|
||||
.slice(0, currentIndex)
|
||||
.reduce((prev, curr) => prev + curr.width, 0);
|
||||
|
||||
left += (rect.width - width) / 2;
|
||||
@ -183,7 +198,7 @@ VantComponent({
|
||||
this.setData({
|
||||
lineStyle: `
|
||||
${height}
|
||||
width: ${width}px;
|
||||
width: ${addUnit(width)};
|
||||
background-color: ${color};
|
||||
-webkit-transform: translateX(${left}px);
|
||||
transform: translateX(${left}px);
|
||||
@ -195,7 +210,7 @@ VantComponent({
|
||||
},
|
||||
|
||||
setTrack() {
|
||||
const { animated, active, duration } = this.data;
|
||||
const { animated, duration, currentIndex } = this.data;
|
||||
|
||||
if (!animated) return '';
|
||||
|
||||
@ -205,8 +220,8 @@ VantComponent({
|
||||
|
||||
this.setData({
|
||||
trackStyle: `
|
||||
width: ${width * this.child.length}px;
|
||||
left: ${-1 * active * width}px;
|
||||
width: ${width * this.children.length}px;
|
||||
left: ${-1 * currentIndex * width}px;
|
||||
transition: left ${duration}s;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
@ -215,7 +230,7 @@ VantComponent({
|
||||
|
||||
const data = { width, animated };
|
||||
|
||||
this.child.forEach((item: WechatMiniprogram.Component.TrivialInstance) => {
|
||||
this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance) => {
|
||||
item.setData(data);
|
||||
});
|
||||
}
|
||||
@ -223,12 +238,19 @@ VantComponent({
|
||||
},
|
||||
|
||||
setActiveTab() {
|
||||
this.child.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
|
||||
if (!isDef(this.currentName)) {
|
||||
this.currentName = this.data.active || this.children[0].computedName;
|
||||
}
|
||||
|
||||
this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
|
||||
const data: TabItemData = {
|
||||
active: index === this.data.active
|
||||
active: item.computedName === this.currentName
|
||||
};
|
||||
|
||||
if (data.active) {
|
||||
this.setData({
|
||||
currentIndex: index
|
||||
});
|
||||
data.inited = true;
|
||||
}
|
||||
|
||||
@ -246,7 +268,7 @@ VantComponent({
|
||||
|
||||
// scroll active tab into view
|
||||
scrollIntoView() {
|
||||
const { active, scrollable } = this.data;
|
||||
const { currentIndex, scrollable } = this.data;
|
||||
|
||||
if (!scrollable) {
|
||||
return;
|
||||
@ -260,9 +282,9 @@ VantComponent({
|
||||
WechatMiniprogram.BoundingClientRectCallbackResult[],
|
||||
WechatMiniprogram.BoundingClientRectCallbackResult
|
||||
]) => {
|
||||
const tabRect = tabRects[active];
|
||||
const tabRect = tabRects[currentIndex];
|
||||
const offsetLeft = tabRects
|
||||
.slice(0, active)
|
||||
.slice(0, currentIndex)
|
||||
.reduce((prev, curr) => prev + curr.width, 0);
|
||||
|
||||
this.setData({
|
||||
@ -288,16 +310,16 @@ VantComponent({
|
||||
onTouchEnd() {
|
||||
if (!this.data.swipeable) return;
|
||||
|
||||
const { active, tabs } = this.data;
|
||||
const { tabs, currentIndex } = this.data;
|
||||
|
||||
const { direction, deltaX, offsetX } = this;
|
||||
const minSwipeDistance = 50;
|
||||
|
||||
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
|
||||
if (deltaX > 0 && active !== 0) {
|
||||
this.setActive(active - 1);
|
||||
} else if (deltaX < 0 && active !== tabs.length - 1) {
|
||||
this.setActive(active + 1);
|
||||
if (deltaX > 0 && currentIndex !== 0) {
|
||||
this.setActive(this.children[currentIndex - 1].computedName);
|
||||
} else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
|
||||
this.setActive(this.children[currentIndex + 1].computedName);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -17,15 +17,16 @@
|
||||
wx:for="{{ tabs }}"
|
||||
wx:key="index"
|
||||
data-index="{{ index }}"
|
||||
class="van-ellipsis tab-class {{ index === active ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}"
|
||||
style="{{ color && index !== active && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
|
||||
class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
|
||||
style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
|
||||
bind:tap="onTap"
|
||||
>
|
||||
<view class="van-ellipsis {{ utils.bem('tab__title', { dot: item.dot }) }}" style="{{ item.titleStyle }}">
|
||||
<view class="van-ellipsis" style="{{ item.titleStyle }}">
|
||||
{{ item.title }}
|
||||
<van-info
|
||||
wx:if="{{ item.info !== null }}"
|
||||
wx:if="{{ item.info !== null || item.dot }}"
|
||||
info="{{ item.info }}"
|
||||
dot="{{ item.dot }}"
|
||||
custom-class="van-tab__title__info"
|
||||
/>
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user