导航组件 - TabBar 选项栏 - 《Vtu Weapp v1.0.7 小程序UI组件库使用手册》

TabBar选项栏

引入

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

      "usingComponents": {
   "vtu-tabbar": "/miniprogram_npm/vtuweapp/tabbar/tabbar/vtu-tabbar",
   "vtu-tabbar-item": "/miniprogram_npm/vtuweapp/tabbar/item/vtu-tabbar-item"
}

代码演示

全屏样式

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

<vtu-navbar title="TabBar" bind:load="navBarLoad"></vtu-navbar>
<vtu-tabbar active-icon-color="orange" current="{{current}}" bind:change="change" custom-class="tabbar-content" mode="page" navbar-height="{{navBarHeight}}">
    <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>
    <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>
    <vtu-tabbar-item label="我的" icon="vtu-icon vtu-icon-wode" badge_value="10" name="my" bind:click="alert1" data-d="3"></vtu-tabbar-item>
    <view class="swiper_center" slot="home">
        <vtu-panel custom-class="panel" content-class="content">
          <vtu-cell slot="header" title="点击切换样式"  border></vtu-cell>
          <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">
            <vtu-radio value="1" label="普通样式"></vtu-radio>
            <vtu-radio value="2" label="自定义样式"></vtu-radio>
            <vtu-radio value="3" label="自定义图片"></vtu-radio>
          </vtu-radio-group>
        </vtu-panel>
    </view>
    <view class="a" slot="add">222</view>
    <view class="a" slot="my">333</view>
</vtu-tabbar>

.js 文件

          Page({
  data: {
    current: 0，
    navBarHeight: 0
  },
  navBarLoad: function(e) {
    this.setData({
      navBarHeight: e.detail.navBarHeight
    })
  },
  change: function(e) {
    this.setData({
      current: e.detail.current
    })
  },
  alert1: function (e) {
    wx.showToast({
      title: "点击成功" + e.currentTarget.dataset.d,
      icon: 'none',
      duration: 2000
    });
  }
});

.json文件

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

          {
  "usingComponents": {
    "vtu-navbar": "/miniprogram_npm/vtuweapp/navbar/vtu-navbar",
    "vtu-radio-group": "/miniprogram_npm/vtuweapp/radio/group/vtu-radio-group",
    "vtu-radio": "/miniprogram_npm/vtuweapp/radio/radio/vtu-radio",
    "vtu-tabbar": "/miniprogram_npm/vtuweapp/tabbar/tabbar/vtu-tabbar",
    "vtu-tabbar-item": "/miniprogram_npm/vtuweapp/tabbar/item/vtu-tabbar-item",
    "vtu-panel": "/miniprogram_npm/vtuweapp/panel/vtu-panel",
    "vtu-cell": "/miniprogram_npm/vtuweapp/cell/item/vtu-cell"
  }
}

app.json

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

          {
  .....
  "window": {
    "navigationStyle": "custom"
  }
  .....
}

自定义样式

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

.js文件

          Page({
  data: {
    current: 0
  },
  change: function(e) {
    this.setData({
      current: e.detail.current
    })
  }
});

自定义图片

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

.js文件

          Page({
  data: {
    current: 0
  },
  change: function(e) {
    this.setData({
      current: e.detail.current
    })
  }
});

组件参数

TabBar Props

参数	说明	类型	默认值	必填

current	当前索引	Number	0	否
bg-color	选项栏背景色	String	-	否
color	选项卡字体和图标颜色	String	-	否
active-color	选中时，当前项字体和图标颜色	String	-	否
font-color	单独设定字体颜色，优先级高于color	String	-	否
icon-color	单独设定图标颜色，优先级高于color	String	-	否
active-icon-color	选中时，选中项图标颜色，优先级高于active-color	String	-	否
active-font-color	选中时，选中项文字颜色，优先级高于active-color	String	-	否
mode	类型，single/page，singel单独显示，page全屏导航显示	String	single	否
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-color	String	-	否
active-font-color	选中时字体颜色，优先级高于active-color	String	-	否
large	是否放大	Boolean	false	否
active-bg-color	选中时当前项背景色	String	-	否
label	选项栏文字	String	-	否
icon-font-size	图标大小	String	-	否
name	用于插槽的唯一标识，使用插槽时，tabBar的mode必须设置为page。	String	-	否

Badge 徽章

参数	说明	类型	默认值	必填

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

TabBar Events

事件	说明	返回值

bind:change

选项栏切换或轮播内容切换事件

event.detail = {current:当当前项索引}

TabBar-Item Events

事件	说明

bind:click

选项栏点击事件

外部样式类

外部样式类名	说明

v-class

组件外部样式类