mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +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-demo": "./dist/switch/demo/index",
|
||||
"van-tab": "./dist/tab/index",
|
||||
"van-tab-demo": "./dist/tab/demo/index",
|
||||
"van-tabs": "./dist/tabs/index",
|
||||
"van-tabbar": "./dist/tabbar/index",
|
||||
"van-tabbar-item": "./dist/tabbar-item/index",
|
||||
|
||||
@ -1,43 +1,3 @@
|
||||
import Page from '../../common/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'
|
||||
});
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,149 +1 @@
|
||||
<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>
|
||||
<van-tab-demo />
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<van-stepper value="{{ 1 }}" step="2" />
|
||||
</van-cell>
|
||||
|
||||
<vanpackages/stepper/demo/index.less-cell center title="限制输入范围">
|
||||
<van-cell center title="限制输入范围">
|
||||
<van-stepper value="{{ 1 }}" min="5" max="8" />
|
||||
</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 {
|
||||
padding: 20px;
|
||||
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