Tabs标签栏

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.    "vtu-tab": "/miniprogram_npm/vtuweapp/tab/vtu-tab",
    3.    "vtu-tabs": "/miniprogram_npm/vtuweapp/tabs/vtu-tabs"
    4. }
    5.

    代码演示

    基础用法

    1. <vtu-tabs value="{{value2}}" bind:change="change" fixed="{{tabFixed}}" bg-color="#fff" fixed-top="{{tabFixed?navBarHeight:0}}">
    2.   <vtu-tab label="标签一" name="name1" custom-class="style-content" badge="hot"></vtu-tab>
    3.   <vtu-tab label="标签二" name="name2" custom-class="style-content" badge="12"></vtu-tab>
    4.   <vtu-tab label="标签三" name="name3" custom-class="style-content"></vtu-tab>
    5.   <vtu-tab label="标签四" name="name4" custom-class="style-content"></vtu-tab>
    6. </vtu-tabs>
    7.

    居中

    1. <vtu-tabs value="{{value2}}" item-align="center" is-average="{{false}}" bind:change="change">
    2.   <vtu-tab label="标签一" name="name1"></vtu-tab>
    3.   <vtu-tab label="标签二" name="name2"></vtu-tab>
    4.   <vtu-tab label="标签三" name="name3" badge="516" badge-max="100" badge-type="success"></vtu-tab>
    5. </vtu-tabs>
    7. Page({
    8.   data: {
    9.     value2: 'name1'
    10.   },
    12.   change(e) {
    13.     this.setData({
    14.       value2: e.detail.name
    15.     })
    16.   }
    17. });
    18.  
    19.

    滚动

    1. <vtu-tabs value="{{value2}}" bind:change="change">
    2.   <vtu-tab label="标签一" name="name1"></vtu-tab>
    3.   <vtu-tab label="标签二" name="name2" badge-is-dot="{{true}}"></vtu-tab>
    4.   <vtu-tab label="标签三" name="name3"></vtu-tab>
    5.   <vtu-tab label="标签四" name="name4"></vtu-tab>
    6.   <vtu-tab label="标签5" name="name5"></vtu-tab>
    7.   <vtu-tab label="标签6" name="name6"></vtu-tab>
    8.   <vtu-tab label="标签7" name="name7"></vtu-tab>
    9.   <vtu-tab label="标签8" name="name8"></vtu-tab>
    10.   <vtu-tab label="很长的标签9" name="name9"></vtu-tab>
    11. </vtu-tabs>
    13. Page({
    14.   data: {
    15.     value2: 'name1'
    16.   },
    18.   change(e) {
    19.     this.setData({
    20.       value2: e.detail.name
    21.     })
    22.   }
    23. });
    24.

    自定义样式

    1. <view class="Tab_Span">
    2.   <vtu-tabs value="{{value2}}" bind:change="change" active-color="#fff" bg-color="#eee" active-bg-color="#07c160" line="{{false}}">
    3.     <vtu-tab label="标签一" name="name1"></vtu-tab>
    4.     <vtu-tab label="标签二" name="name2"></vtu-tab>
    5.     <vtu-tab label="标签三" name="name3"></vtu-tab>
    6.     <vtu-tab label="标签四" name="name4"></vtu-tab>
    7.     <vtu-tab label="标签5" name="name5"></vtu-tab>
    8.     <vtu-tab label="标签6" name="name6"></vtu-tab>
    9.     <vtu-tab label="标签7" name="name7"></vtu-tab>
    10.     <vtu-tab label="标签8" name="name8"></vtu-tab>
    11.     <vtu-tab label="很长的标签9" name="name9"></vtu-tab>
    12.   </vtu-tabs>
    13. </view>
    14. <view class="Tab_Span">
    15.   <vtu-tabs value="{{value2}}" bind:change="change" color="#909399" active-color="#f44" bg-color="#f5f7fa" active-bg-color="#fff">
    16.     <vtu-tab label="标签一" name="name1"></vtu-tab>
    17.     <vtu-tab label="标签二" name="name2"></vtu-tab>
    18.     <vtu-tab label="标签三" name="name3"></vtu-tab>
    19.     <vtu-tab label="标签四" name="name4"></vtu-tab>
    20.   </vtu-tabs>
    21. </view>
    22. <view class="Tab_Span">
    23.   <vtu-tabs value="{{value2}}" bind:change="change" custom-class="style5" round tab-class="style5-tab" tab-li-class="style5-tab-li">
    24.     <vtu-tab label="标签一" name="name1" custom-class="style-content block">内容1</vtu-tab>
    25.     <vtu-tab label="标签二" name="name2" custom-class="style-content block">内容2</vtu-tab>
    26.     <vtu-tab label="标签三" name="name3" custom-class="style-content block">内容3</vtu-tab>
    27.     <vtu-tab label="标签四" name="name4" custom-class="style-content block">内容4</vtu-tab>
    28.   </vtu-tabs>
    29. </view>
    31. Page({
    32.   data: {
    33.     value2: 'name1'
    34.   },
    36.   change(e) {
    37.     this.setData({
    38.       value2: e.detail.name
    39.     })
    40.   }
    41. });
    42.

    图标

    1. <vtu-tabs value="{{value2}}" bind:change="change" hidden-slot="{{true}}">
    2.   <vtu-tab label="标签一" name="name1" icon="iconfont icon-shangchuan"></vtu-tab>
    3.   <vtu-tab label="标签二" name="name2" icon="iconfont icon-share"></vtu-tab>
    4.   <vtu-tab label="标签三" name="name3" icon="iconfont icon-dianhua"></vtu-tab>
    5.   <vtu-tab label="标签四" name="name4" icon="iconfont icon-sousuo"></vtu-tab>
    6. </vtu-tabs>
    8. Page({
    9.   data: {
    10.     value2: 'name1'
    11.   },
    13.   change(e) {
    14.     this.setData({
    15.       value2: e.detail.name
    16.     })
    17.   }
    18. });
    19.

    组件参数

    Tabs 标签页 - 图1