mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Tab): add demo test
This commit is contained in:
nemo-shen
neverland
parent
ce8955560e
commit
6e4ebfd886
@ -121,6 +121,7 @@
|
|||||||
"van-switch": "./dist/switch/index",
|
"van-switch": "./dist/switch/index",
|
||||||
"van-switch-demo": "./dist/switch/demo/index",
|
"van-switch-demo": "./dist/switch/demo/index",
|
||||||
"van-tab": "./dist/tab/index",
|
"van-tab": "./dist/tab/index",
|
||||||
|
"van-tab-demo": "./dist/tab/demo/index",
|
||||||
"van-tabs": "./dist/tabs/index",
|
"van-tabs": "./dist/tabs/index",
|
||||||
"van-tabbar": "./dist/tabbar/index",
|
"van-tabbar": "./dist/tabbar/index",
|
||||||
"van-tabbar-item": "./dist/tabbar-item/index",
|
"van-tabbar-item": "./dist/tabbar-item/index",
|
||||||
|
|||||||
@ -1,43 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
tabs2: [1, 2],
|
|
||||||
tabs3: [1, 2, 3],
|
|
||||||
tabs4: [1, 2, 3, 4],
|
|
||||||
tabs6: [1, 2, 3, 4, 5, 6],
|
|
||||||
tabsWithName: [
|
|
||||||
{ name: 'a', index: 1 },
|
|
||||||
{ name: 'b', index: 2 },
|
|
||||||
{ name: 'c', index: 3 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
onClickDisabled(event) {
|
|
||||||
wx.showToast({
|
|
||||||
title: `标签 ${event.detail.index + 1} 已被禁用`,
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(event) {
|
|
||||||
wx.showToast({
|
|
||||||
title: `切换到标签 ${event.detail.index + 1}`,
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onClickNavRight() {
|
|
||||||
wx.showToast({
|
|
||||||
title: '点击 right nav',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onClick(event) {
|
|
||||||
wx.showToast({
|
|
||||||
title: `点击标签 ${event.detail.index + 1}`,
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,149 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-tab-demo />
|
||||||
<van-tabs active="{{ 1 }}" bind:change="onChange">
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs4 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="通过名称匹配">
|
|
||||||
<van-tabs active="b">
|
|
||||||
<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="{{ tabs6 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="禁用标签">
|
|
||||||
<van-tabs bind:disabled="onClickDisabled">
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs3 }}"
|
|
||||||
wx:key="index"
|
|
||||||
disabled="{{ index === 1 }}"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="样式风格">
|
|
||||||
<van-tabs type="card" tab-class="special-tab">
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs3 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content-2">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="点击事件">
|
|
||||||
<van-tabs bind:click="onClick">
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs2 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="粘性布局">
|
|
||||||
<van-tabs sticky>
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs4 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="切换动画">
|
|
||||||
<van-tabs animated>
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs4 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="滑动切换">
|
|
||||||
<van-tabs swipeable>
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs4 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义标题">
|
|
||||||
<van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="special-tab" tab-active-class="special-tab-active">
|
|
||||||
<van-icon
|
|
||||||
slot="nav-right"
|
|
||||||
name="search"
|
|
||||||
custom-class="right-nav"
|
|
||||||
bind:click="onClickNavRight"
|
|
||||||
/>
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs4 }}"
|
|
||||||
wx:key="index"
|
|
||||||
title="{{ '标签 ' + item }}"
|
|
||||||
dot="{{ index === 1 }}"
|
|
||||||
info="{{ index === 2 ? 99 : null }}"
|
|
||||||
>
|
|
||||||
<view class="content">
|
|
||||||
{{ '内容' + item }}
|
|
||||||
</view>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<van-stepper value="{{ 1 }}" step="2" />
|
<van-stepper value="{{ 1 }}" step="2" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<vanpackages/stepper/demo/index.less-cell center title="限制输入范围">
|
<van-cell center title="限制输入范围">
|
||||||
<van-stepper value="{{ 1 }}" min="5" max="8" />
|
<van-stepper value="{{ 1 }}" min="5" max="8" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
|
|||||||
9
packages/tab/demo/index.json
Normal file
9
packages/tab/demo/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-tab": "../../tab/index",
|
||||||
|
"van-tabs": "../../tabs/index",
|
||||||
|
"van-icon": "../../icon/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,3 @@
|
|||||||
page {
|
|
||||||
padding-bottom: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
45
packages/tab/demo/index.ts
Normal file
45
packages/tab/demo/index.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
tabs2: [1, 2],
|
||||||
|
tabs3: [1, 2, 3],
|
||||||
|
tabs4: [1, 2, 3, 4],
|
||||||
|
tabs6: [1, 2, 3, 4, 5, 6],
|
||||||
|
tabsWithName: [
|
||||||
|
{ name: 'a', index: 1 },
|
||||||
|
{ name: 'b', index: 2 },
|
||||||
|
{ name: 'c', index: 3 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClickDisabled(event) {
|
||||||
|
wx.showToast({
|
||||||
|
title: `标签 ${event.detail.index + 1} 已被禁用`,
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(event) {
|
||||||
|
wx.showToast({
|
||||||
|
title: `切换到标签 ${event.detail.index + 1}`,
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onClickNavRight() {
|
||||||
|
wx.showToast({
|
||||||
|
title: '点击 right nav',
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick(event) {
|
||||||
|
wx.showToast({
|
||||||
|
title: `点击标签 ${event.detail.index + 1}`,
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
149
packages/tab/demo/index.wxml
Normal file
149
packages/tab/demo/index.wxml
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-tabs active="{{ 1 }}" bind:change="onChange">
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs4 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="通过名称匹配">
|
||||||
|
<van-tabs active="b">
|
||||||
|
<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="{{ tabs6 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用标签">
|
||||||
|
<van-tabs bind:disabled="onClickDisabled">
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs3 }}"
|
||||||
|
wx:key="index"
|
||||||
|
disabled="{{ index === 1 }}"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="样式风格">
|
||||||
|
<van-tabs type="card" tab-class="special-tab">
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs3 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content-2">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="点击事件">
|
||||||
|
<van-tabs bind:click="onClick">
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs2 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="粘性布局">
|
||||||
|
<van-tabs sticky>
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs4 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="切换动画">
|
||||||
|
<van-tabs animated>
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs4 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="滑动切换">
|
||||||
|
<van-tabs swipeable>
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs4 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义标题">
|
||||||
|
<van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="special-tab" tab-active-class="special-tab-active">
|
||||||
|
<van-icon
|
||||||
|
slot="nav-right"
|
||||||
|
name="search"
|
||||||
|
custom-class="right-nav"
|
||||||
|
bind:click="onClickNavRight"
|
||||||
|
/>
|
||||||
|
<van-tab
|
||||||
|
wx:for="{{ tabs4 }}"
|
||||||
|
wx:key="index"
|
||||||
|
title="{{ '标签 ' + item }}"
|
||||||
|
dot="{{ index === 1 }}"
|
||||||
|
info="{{ index === 2 ? 99 : null }}"
|
||||||
|
>
|
||||||
|
<view class="content">
|
||||||
|
{{ '内容' + item }}
|
||||||
|
</view>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</demo-block>
|
||||||
1552
packages/tab/test/__snapshots__/demo.spec.ts.snap
Normal file
1552
packages/tab/test/__snapshots__/demo.spec.ts.snap
Normal file
File diff suppressed because it is too large
Load Diff
11
packages/tab/test/demo.spec.ts
Normal file
11
packages/tab/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import simulate from 'miniprogram-simulate';
|
||||||
|
|
||||||
|
test('should render demo and match snapshot', () => {
|
||||||
|
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||||
|
rootPath: path.resolve(__dirname, '../../'),
|
||||||
|
});
|
||||||
|
const comp = simulate.render(id);
|
||||||
|
comp.attach(document.createElement('parent-wrapper'));
|
||||||
|
expect(comp.toJSON()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user