TMSUI

# Tabbar 标签栏

# 介绍

切换分页的导航组件，通常固定在底部。

# 使用指南

# 一般用法

<tms-tabbar current="{{currentTab}}" fix-bottom="{{false}}" bind:on-change="onTabItemTap">
  <tms-tabbar-item wx:for="{{tabs}}" wx:key="item" icon="{{item.icon}}" active-icon="{{item.activeIcon}}"
                   name="{{item.name}}"/>
</tms-tabbar>

Page({
  data: {
    tabs: [
      {
        name: '车主',
        icon: 'radio',
        activeIcon: 'radio-active',
      },
      {
        name: '出行',
        icon: 'star-o',
        activeIcon: 'star',
      },
      {
        name: '福利',
        icon: 'correct',
        activeIcon: 'correct-o',
      },
    ],
    currentTab: '车主',
  },

  onTabItemTap(e: any) {
    const { name } = e.detail;
    this.setData({ currentTab: name });
  },
});

# 使用徽标

<tms-tabbar current="{{currentTab}}" fix-bottom="{{false}}" bind:on-change="onTabItemTap">
  <tms-tabbar-item wx:for="{{tabs}}" wx:key="item" icon="{{item.icon}}" active-icon="{{item.activeIcon}}"
                   dot="{{item.dot}}" dotText="{{item.dotText}}" name="{{item.name}}"/>
</tms-tabbar>

Page({
  data: {
    tabs: [
      {
        name: '车主',
        icon: 'radio',
        activeIcon: 'radio-active',
        dotText: '2',
      },
      {
        name: '出行',
        icon: 'star-o',
        activeIcon: 'star',
        dot: true,
      },
      {
        name: '福利',
        icon: 'correct',
        activeIcon: 'correct-o',
        dotText: '5',
      },
    ],
    currentTab: '车主',
  },

  onTabItemTap(e: any) {
    const { name } = e.detail;
    this.setData({ currentTab: name });
  },
});

# 自定义图片

<tms-tabbar current="{{currentTab}}" fix-bottom="{{false}}" bind:on-change="onTabItemTap">
  <tms-tabbar-item wx:for="{{tabs}}" wx:key="item" src="{{item.src}}" active-src="{{item.activeSrc}}"
                   name="{{item.name}}"/>
</tms-tabbar>

Page({
  data: {
    tabs: [
      {
        name: '车主',
        src: `${imgDir}/chezhu.png`,
        activeSrc: `${imgDir}/chezhu_selected.png`,
      },
      {
        name: '出行',
        src: `${imgDir}/chuxing.png`,
        activeSrc: `${imgDir}/chuxing_selected.png`,
      },
      {
        name: '福利',
        src: `${imgDir}/fuli.png`,
        activeSrc: `${imgDir}/fuli_selected.png`,
      },
    ],
    currentTab: '车主',
  },

  onTabItemTap(e: any) {
    const { name } = e.detail;
    this.setData({ currentTab: name });
  },
});

# 固定底部

<tms-tabbar current="{{currentTab}}" bind:on-change="onTabItemTap">
  <tms-tabbar-item wx:for="{{tabs}}" wx:key="item" icon="{{item.icon}}" active-icon="{{item.activeIcon}}"
                   name="{{item.name}}"/>
</tms-tabbar>

Page({
  data: {
    tabs: [
      {
        name: '车主',
        icon: 'radio',
        activeIcon: 'radio-active',
      },
      {
        name: '出行',
        icon: 'star-o',
        activeIcon: 'star',
      },
      {
        name: '福利',
        icon: 'correct',
        activeIcon: 'correct-o',
      },
    ],
    currentTab: '车主',
  },

  onTabItemTap(e: any) {
    const { name } = e.detail;
    this.setData({ currentTab: name });
  },
});

# tms-tabbar API

属性 说明 类型 默认值 版本
current 当前选中项的name string
bottom-safe-area 为iphoneX等部分机型留出底部空间 boolean true
border-top 显示上边距 boolean true
fix-bottom 自定定位到屏幕底部 boolean true
place-height 自动定位到底部时是否占用文档流高度 boolean false
control 是否受控模式，开启后点击不自动切换tab boolean false

# tms-tabbar-item API

属性 说明 类型 默认值 版本
name 标签名，匹配的key string
icon 使用内置icon的图片，参考icon组件 string
src 使用自定义的图片链接 string
active-icon 选中状态时的icon string
active-src 选中状态时的图片链接 string
dot 右上角显示红点 boolean false
disable 是否禁用状态 boolean false
dot-text 自定义红点内容 string
badge-style 定义徽标样式，参考badge组件的custom-style属性 string
icon-size 定义icon大小，参考icon组件的size属性 string 44rpx
label-style 自定义标签样式 string

# EVENTS

属性 说明 类型
bind:on-change 切换不同标签时的事件 (event) => {}

# css变量

// 高度
--tabbar-height: 100rpx;
// 背景色
--tabbar-background: #fff;
// 图标大小
--tabbar-item-icon-size: 44rpx;
// 文字的margin-top
--tabbar-item-label-margin-top: 6rpx;
// 文字大小
--tabbar-item-font-size: 26rpx;
// 文字颜色
--tabbar-item-color: #000;
// 选中状态的文字颜色
--tabbar-item-active-color: #0054f3;
// 禁用状态的透明度
--tabbar-item-disable-opacity: .5;

# FAQ

← Navbar 导航栏 →