# mx-tabbar 底部导航栏

底部导航栏，用于在对设备状态的切换。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-tabbar": "/miniprogram_npm/m-ui/mx-tabbar/index",
  "mx-tabbar-item": "/miniprogram_npm/m-ui/mx-tabbar-item/index",
  "mx-tabber-button-item": "/miniprogram_npm/m-ui/mx-tabbar-button-item/index",
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

<mx-tabbar>
  <mx-tabbar-item  checked="{{ checked }}" icon={{icon1}} active-icon={{icon2}} bind:change="onChange1">标签</mx-tabbar-item>
  <mx-tabbar-item  checked="{{ checked1 }}" icon={{icon3}} active-icon={{icon4}} bind:change="onChange2">标签</mx-tabbar-item>
  <mx-tabbar-item  checked="{{ checked2 }}" icon={{icon5}} active-icon={{icon6}} bind:change="onChange3">标签</mx-tabbar-item>
  <mx-tabbar-item  checked="{{ checked3 }}" icon={{icon7}} active-icon={{icon8}} bind:change="onChange4">标签</mx-tabbar-item>
</mx-tabbar>

Page({
  data: {
    icon1: '/assets/image/example/tabbar/icon-a.png',
    icon2: '/assets/image/example/tabbar/icon-b.png',
    icon3: '/assets/image/example/tabbar/icon-c.png',
    icon4: '/assets/image/example/tabbar/icon-d.png',
    icon5: '/assets/image/example/tabbar/icon-e.png',
    icon6: '/assets/image/example/tabbar/icon-f.png',
    icon7: '/assets/image/example/tabbar/icon-g.png',
    icon8: '/assets/image/example/tabbar/icon-h.png',
    checked1: true,
    checked2: true,
    checked3: false,
    checked4: false,
  },
  onChange1({ detail }) {
    console.log(detail)
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked1: detail,
    })
  },
  onChange2({ detail }) {
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked2: detail,
    })
  },
  onChange3({ detail }) {
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked3: detail,
    })
  },
  onChange4({ detail }) {
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked4: detail,
    })
  },
});

# 展示按钮形式

通过设置tabber-button-item，可以设置按钮点击形式。

<mx-tabbar custom-class="tabbar-position-button">
      <mx-tabber-button-item
        inactive-color="#E9F1FF"
        activeIcon="{{icon2}}"
        icon="{{icon1}}"
        style="margin-right: 24px"
        checked="{{ checked1 }}"
        bind:change="onChange1"
      ></mx-tabber-button-item>
      <mx-tabber-button-item
        style="flex: 1"
        active-title-color="#fff"
        inactive-title-color="#666666"
        flexbutton
        title="启动"
        checked="{{ checked2 }}"
        bind:change="onChange2"
      ></mx-tabber-button-item>
    </mx-tabbar>

.tabbar-position-button {
  position: relative !important;
  padding: 8px 40px !important;
}

# 设置圆边和阴影

设置 border-radius box-shadow属性后，组件会展示阴影和圆边

<mx-tabbar   border-radius box-shadow>
  <mx-tabbar-item  checked="{{ checked }}" icon={{icon1}} active-icon={{icon2}} bind:change="onChange1">标签</mx-tabbar-item>
  <mx-tabbar-item  checked="{{ checked1 }}" icon={{icon3}} active-icon={{icon4}} bind:change="onChange2">标签</mx-tabbar-item>
  <mx-tabbar-item  checked="{{ checked2 }}" icon={{icon5}} active-icon={{icon6}} bind:change="onChange3">标签</mx-tabbar-item>
  <mx-tabbar-item  checked="{{ checked3 }}" icon={{icon7}} active-icon={{icon8}} bind:change="onChange4">标签</mx-tabbar-item>
</mx-tabbar>

# 自定义颜色风格

设置inactive-color,active-color属性来设置按钮的颜色显示，通过active-icon和icon来设置图片。

<mx-tabbar border-radius box-shadow>
  <mx-tabbar-item checked="{{ checked }}" inactive-color="#E9F1FF"  active-color="#FF2D84"  icon={{icon1}} active-icon={{icon2}} bind:change="onChange1">标签</mx-tabbar-item>
</mx-tabbar>

# 设置预约时状态

通过设置activeSpc,activeSpcColor,activeSpcIcon来设置预约时的特殊状态。

<mx-tabbar border-radius box-shadow>
  <mx-tabbar-item checked="{{ checked }}" active-spc active-spc-color="#E9F1FF"   inactive-color="#E9F1FF"  active-color="#FF2D84"  icon={{icon1}} active-icon={{icon2}} active-spc-icon="{{icon3}}" bind:change="onChange1">标签</mx-tabbar-item>
</mx-tabbar>

# API

# Tabbar Props

参数	说明	类型	默认值
`fixed`	是否固定在底部	boolean	`true`
`placeholder`	固定在底部时，是否在标签位置生成一个等高的占位元素	boolean	`false`
`border`	是否展示外边框	boolean	`true`
`z-index`	元素 z-index	number	`1`
`safe-area-inset-bottom`	是否为 iPhoneX 留出底部安全距离	boolean	`true`

# TabbarItem Props

参数	说明	类型	默认值
`active-color`	选中标签的颜色	string	`#267AFF`
`inactive-color`	未选中标签的颜色	string	`#F2F2F2`
`active-icon`	选中标签的图片	string	-
`icon`	未选中标签的图片	string	-
`loading`	是否加载状态	boolean	`false`
`disabled`	是否禁用	boolean	`false`
`icon-prefix`	图标类名前缀	string	`mx-icon`
`dot`	是否显示小红点	boolean	`false`
`info`	图标右上角提示信息	string、number	-
`active-spc`	是否预约	boolean	`false`
`active-spc`	是否预约	boolean	`false`
`active-spc-color`	预约关机时的颜色	string	-
`active-spc-icon`	预约关机时的图标	string	-

# TabbarItem Event

事件名	说明	参数
`bind:change`	切换标签时触发	event.detail: 当前选中标签的名称或索引值

# TabbarItem 外部样式类

名称	说明
`custom-class`	根节点样式类

# TabbarButtonItem Props

参数	说明	类型	默认值
`title`	按钮文案	string	-
`active-color`	选中标签的颜色	string	`#267AFF`
`inactive-color`	未选中标签的颜色	string	`#F2F2F2`
`active-icon`	选中标签的图片	string	-
`icon`	未选中标签的图片	string	-
`loading`	是否加载状态	boolean	`false`
`disabled`	是否禁用	boolean	`false`
`icon-prefix`	图标类名前缀	string	`mx-icon`
`dot`	是否显示小红点	boolean	`false`
`info`	图标右上角提示信息	string、number	-
`active-spc`	是否预约	boolean	`false`
`active-spc`	是否预约	boolean	`false`
`active-spc-color`	预约关机时的颜色	string	-
`active-spc-icon`	预约关机时的图标	string	-
`flexbutton`	是否横向铺平	boolean	`false`
`active-title-color`	选中状态文案颜色	string	`#fff`
`inactive-title-color`	非选中状态文案颜色	string	`#666`

← 导航栏（nav）侧边导航（sidebar） →