基础组件 Basic - TabBar 标签栏 - 《Mand Mobile v1.x 组件文档》

引入
代码演示
API

TabBar 标签栏

用于创建不含内容区域的标签栏

引入

import { TabBar } from 'mand-mobile'
Vue.component(TabBar.name, TabBar)

代码演示

基本

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-0">
    <md-tab-bar
      :titles="titles"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
}
</script>

多项滚动

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-0">
    <md-tab-bar :titles="titles"></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四', '第五', '第六', '第七', '第八', '第九'],
    }
  },
}
</script>

指定下划线长度

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-3">
    <md-tab-bar
      :titles="titles"
      :show-ink-bar="true"
      :ink-bar-length="40"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
}
</script>

自定义内容

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-5">
    <md-tab-bar
      :show-ink-bar="true">
      <div>
        <md-icon name="hollow-plus" size="sm"></md-icon>
        我
      </div>
      <div>
        <md-icon name="cross" size="sm"></md-icon>
        你
      </div>
      <div>
        <md-icon name="right" size="sm"></md-icon>
        他
      </div>
    </md-tab-bar>
  </div>
</template>
<script>
import {TabBar, Icon} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [Icon.name]: Icon,
    [TabBar.name]: TabBar,
  },
}
</script>

通过公共方法切换 selectTab(2)

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-7">
    <md-tab-bar
      :titles="titles"
      :show-ink-bar="true"
      ref="tabBar"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar, Toast} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
  mounted() {
    window.triggerTabBar = () => {
      this.$refs.tabBar.selectTab(2)
    }
  },
  methods: {
    alert(index, preIndex) {
      Toast.succeed(`index由${preIndex}切换为${index}`)
    },
  },
}
</script>

设置边距

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-9">
    <md-tab-bar
      :titles="titles"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
}
</script>
<style lang="stylus" scoped>
.md-tab-bar
  padding 0 100px
</style>

不带下划线

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-1">
    <md-tab-bar
      :titles="titles"
      :show-ink-bar="false"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
}
</script>

指定默认标签

默认标签2

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-2">
    <md-tab-bar
      :titles="titles"
      :show-ink-bar="true"
      :default-index="2"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
}
</script>

禁用下划线动画

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-4">
    <md-tab-bar
      :titles="titles"
      :show-ink-bar="true"
      :ink-bar-animate="false"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
}
</script>

监听点击事件

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-6">
    <md-tab-bar
      :titles="titles"
      @indexChanged="alert"
    ></md-tab-bar>
  </div>
</template>
<script>
import {TabBar, Toast} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      titles: ['第一', '第二', '第三', '第四'],
    }
  },
  methods: {
    alert(index, preIndex) {
      Toast.succeed(`index由${preIndex}切换为${index}`)
    },
  },
}
</script>

scope-slot

<template>
  <div class="md-example-child md-example-child-tab-bar md-example-child-tab-bar-8">
    <md-tab-bar
      :show-ink-bar="true"
      :titles="titles">
      <div slot="title"
        slot-scope="props">
        <md-icon name="hollow-plus" size="sm"></md-icon>
        {{props.prefix}}{{props.title}}
      </div>
    </md-tab-bar>
  </div>
</template>
<script>
import {TabBar, Icon} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  data() {
    return {
      titles: [
        {
          title: '第1',
          prefix: '我',
        },
        {
          title: '第2',
          prefix: '你',
        },
        {
          title: '第3',
          prefix: '他',
        },
      ],
    }
  },
  components: {
    [Icon.name]: Icon,
    [TabBar.name]: TabBar,
  },
}
</script>

API

TabBar Props

属性	说明	类型	默认值	备注
titles	标签标题数组	Array	-	传入该数组会直接根据数组内容渲染组件，也可以不使用该属性，直接在控件中插入定制的标题按钮。在不使用scope-slot时，该值为字符串数组；在使用scope-slot时，该值为对象数组，每个对象会作为props供父组件使用
show-ink-bar	是否显示下划线	Boolean	true	-
ink-bar-length	下划线宽度	Number	70	该数值为下划线占标签按钮宽度的百分比，须在0-100之间
ink-bar-animate	是否启用下划线动画	Boolean	true	-
default-index	默认激活的标签索引	Number	0	-

TabBar Methods

selectTab(index)

选择某一标签

属性	说明	类型	默认值
index	标签索引	Number	-

TabBar Events

@indexChanged(index, preIndex)

标签索引发生变化

属性	说明	类型
index	改变后的标签索引	Number
preIndex	改变前的标签索引	Number