TabBar选项栏

    引入

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

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

    代码演示

    全屏样式

    mode=page，此时为全屏显示模式

    1. <vtu-navbar title="TabBar" bind:load="navBarLoad"></vtu-navbar>
    2. <vtu-tabbar active-icon-color="orange" current="{{current}}" bind:change="change" custom-class="tabbar-content" mode="page" navbar-height="{{navBarHeight}}">
    3.     <vtu-tabbar-item label="首页" icon="vtu-icon vtu-icon-yemian-copy-copy" badge_is-dot name="home" bind:click="alert1" data-d="1"></vtu-tabbar-item>
    4.     <vtu-tabbar-item label="发布" icon="vtu-icon vtu-icon-jiahao" large icon-font-size="36px" name="add" bind:click="alert1" data-d="2"></vtu-tabbar-item>
    5.     <vtu-tabbar-item label="我的" icon="vtu-icon vtu-icon-wode" badge_value="10" name="my" bind:click="alert1" data-d="3"></vtu-tabbar-item>
    6.     <view class="swiper_center" slot="home">
    7.         <vtu-panel custom-class="panel" content-class="content">
    8.           <vtu-cell slot="header" title="点击切换样式"  border></vtu-cell>
    9.           <vtu-radio-group model="{{type}}" align="right" active-color="red" radio-icon="iconfont icon-xuanze" active-radio-icon="iconfont icon-xuanze-danxuan" bind:change="radioChange">
    10.             <vtu-radio value="1" label="普通样式"></vtu-radio>
    11.             <vtu-radio value="2" label="自定义样式"></vtu-radio>
    12.             <vtu-radio value="3" label="自定义图片"></vtu-radio>
    13.           </vtu-radio-group>
    14.         </vtu-panel>
    15.     </view>
    16.     <view class="a" slot="add">222</view>
    17.     <view class="a" slot="my">333</view>
    18. </vtu-tabbar>
    19.

    .js 文件

    1.           Page({
    2.   data: {
    3.     current: 0，
    4.     navBarHeight: 0
    5.   },
    7.   navBarLoad: function(e) {
    8.     this.setData({
    9.       navBarHeight: e.detail.navBarHeight
    10.     })
    11.   },
    13.   change: function(e) {
    14.     this.setData({
    15.       current: e.detail.current
    16.     })
    17.   },
    19.   alert1: function (e) {
    20.     wx.showToast({
    21.       title: "点击成功" + e.currentTarget.dataset.d,
    22.       icon: 'none',
    23.       duration: 2000
    24.     });
    25.   }
    26. });
    27.

    .json文件

    导航栏样式设置为custom 自定义导航栏，只保留右上角胶囊按钮

    1.           {
    2.   "usingComponents": {
    3.     "vtu-navbar": "/miniprogram_npm/vtuweapp/navbar/vtu-navbar",
    4.     "vtu-radio-group": "/miniprogram_npm/vtuweapp/radio/group/vtu-radio-group",
    5.     "vtu-radio": "/miniprogram_npm/vtuweapp/radio/radio/vtu-radio",
    6.     "vtu-tabbar": "/miniprogram_npm/vtuweapp/tabbar/tabbar/vtu-tabbar",
    7.     "vtu-tabbar-item": "/miniprogram_npm/vtuweapp/tabbar/item/vtu-tabbar-item",
    8.     "vtu-panel": "/miniprogram_npm/vtuweapp/panel/vtu-panel",
    9.     "vtu-cell": "/miniprogram_npm/vtuweapp/cell/item/vtu-cell"
    10.   }
    11. }
    12.

    app.json

    导航栏样式设置为custom 自定义导航栏，只保留右上角胶囊按钮

    1.           {
    2.   .....
    4.   "window": {
    5.     "navigationStyle": "custom"
    6.   }
    8.   .....
    9. }
    10.

    自定义样式

    1. <vtu-tabbar active-color="skyblue" bg-color="#3a3a3a" color="#fff" current="{{current}}" bind:change="change">
    2.   <vtu-tabbar-item label="首页" icon="iconfont icon-yemian-copy-copy"></vtu-tabbar-item>
    3.   <vtu-tabbar-item label="社区" icon="iconfont icon-kefu"></vtu-tabbar-item>
    4.   <vtu-tabbar-item label="发布" icon="iconfont icon-jiahao" active-bg-color="#000" active-icon="iconfont icon-qingkong"></vtu-tabbar-item>
    5.   <vtu-tabbar-item label="发现" icon="iconfont icon-jiansuo"></vtu-tabbar-item>
    6.   <vtu-tabbar-item label="我的" icon="iconfont icon-wode" badge_is-dot></vtu-tabbar-item>
    7. </vtu-tabbar>
    8.

    .js文件

    1.           Page({
    2.   data: {
    3.     current: 0
    4.   },
    6.   change: function(e) {
    7.     this.setData({
    8.       current: e.detail.current
    9.     })
    10.   }
    11. });
    12.

    自定义图片

    1. <vtu-tabbar current="{{current}}" bind:change="change">
    2.   <vtu-tabbar-item label="首页" src="/assets/image/home.png" badge_value="hot" active-src="/assets/image/home1.png"></vtu-tabbar-item>
    3.   <vtu-tabbar-item label="发布" src="/assets/image/logo.png" large></vtu-tabbar-item>
    4.   <vtu-tabbar-item label="我的" src="/assets/image/my1.png" active-src="/assets/image/my.png"></vtu-tabbar-item>
    5. </vtu-tabbar>
    6.

    .js文件

    1.           Page({
    2.   data: {
    3.     current: 0
    4.   },
    6.   change: function(e) {
    7.     this.setData({
    8.       current: e.detail.current
    9.     })
    10.   }
    11. });
    12.

    组件参数

    TabBar Props

    参数说明类型默认值必填
    current当前索引Number0否
    bg-color选项栏背景色String-否
    color选项卡字体和图标颜色String-否
    active-color选中时，当前项字体和图标颜色String-否
    font-color单独设定字体颜色，优先级高于colorString-否
    icon-color单独设定图标颜色，优先级高于colorString-否
    active-icon-color选中时，选中项图标颜色，优先级高于active-colorString-否
    active-font-color选中时，选中项文字颜色，优先级高于active-colorString-否
    mode类型，single/page，singel单独显示，page全屏导航显示Stringsingle否
    navBar-height导航栏高度，mode=page且使用navBar组件时必填，用于全屏显示时减去导航栏高度。String-否

    TabBar-Item Pros

    参数说明类型默认值必填
    icon图标-否
    active-icon选中时图标String-否
    src图片路径String-否
    active-src选中时图片路径String-否
    font-color字体颜色String-否
    icon-color图标颜色String-否
    active-color选中时图标和字体颜色String-否
    active-icon-color选中时图标颜色，优先级高于active-colorString-否
    active-font-color选中时字体颜色，优先级高于active-colorString-否
    large是否放大Booleanfalse否
    active-bg-color选中时当前项背景色String-否
    label选项栏文字String-否
    icon-font-size图标大小String-否
    name用于插槽的唯一标识，使用插槽时，tabBar的mode必须设置为page。String-否

    Badge 徽章

    参数说明类型默认值必填
    badge_value显示值String-否
    badge_shape形状，bubble：气泡，dot：圆点Booleanbubble否
    badge_max最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型Number-否
    badge_is-dot小圆点，没有内容Booleanfalse否
    badge_color文字颜色-否
    badge_bg-color徽章背景色-否

    TabBar Events

    事件说明返回值
    bind:change选项栏切换或轮播内容切换事件event.detail = {current:当当前项索引}

    TabBar-Item Events

    事件说明
    bind:click选项栏点击事件

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    TabBar 选项栏 - 图1