Waiter 855cfa5d94
chore: change some style (#2773)
* chore: change some style

* chore: change some code

* fix(Tabs): 调整初始化时机
2020-02-18 20:33:39 +08:00

150 lines
3.2 KiB
Plaintext

<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>