TabBar 标签栏 - 《Mand Mobile v2.x 组件文档》

引入
代码演示
- 基本
- 滚动
- 自定义内容
- 手势切换
- 首屏数量
- 无下划线
- 监听事件
API
- TabBar Props
- TabBar Methods
  - reflow()
- TabBar Events
  - @change(item, index, prevIndex)
- TabBar Slot

TabBar 标签栏

Scan me!

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

引入

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

代码演示

基本

TabBar 标签栏 - 图2

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-0">
    <md-tab-bar
      v-model="current"
      :items="items"
    />
  </div>
</template>
<script>
import {TabBar} from 'mand-mobile'
export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      current: 1,
      items: [{name: 1, label: '标签1'}, {name: 2, label: '标签2'}],
    }
  },
}
</script>

滚动

TabBar 标签栏 - 图3

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-2">
    <md-tab-bar
      v-model="current"
      :items="items"
      :maxLength="5"
    />
  </div>
</template>

<script>
import {TabBar} from 'mand-mobile'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      current: 1,
      items: [
        {name: 1, label: '精选'},
        {name: 2, label: '全部'},
        {name: 3, label: '满减券'},
        {name: 4, label: '立减券'},
        {name: 5, label: '免息券'},
        {name: 6, label: '校园专享'},
        {name: 7, label: '夜间优惠'},
        {name: 8, label: '红包'},
      ],
    }
  },
}

</script>

自定义内容

TabBar 标签栏 - 图4

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-4">
    <md-tab-bar
      v-model="current"
      :items="items"
      :has-ink="false"
    >
      <template slot="item" slot-scope="{ item }">
        <div class="custom-item">
          <div class="icon">
            <md-icon :name="item.icon" />
          </div>
          <div class="text">
            <span v-text="item.label"></span>
          </div>
        </div>
      </template>
    </md-tab-bar>
  </div>
</template>

<script>
import {TabBar, Icon} from 'mand-mobile'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
    [Icon.name]: Icon,
  },
  data() {
    return {
      current: 1,
      items: [{name: 1, label: '首页', icon: 'home'}, {name: 2, label: '我的', icon: 'user'}],
    }
  },
}

</script>

<style lang="stylus">
.md-example-child-tab-bar-4
  .custom-item
    display flex
    flex-direction column
    align-items center
    justify-content center
    height 100%
    flex 1
    .text
      font-size 20px
</style>

手势切换

TabBar 标签栏 - 图5

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-6">
    <md-tab-bar
      v-model="current"
      :items="items"
      @change="onTabChange"
    ></md-tab-bar>
    <md-swiper
      ref="swiper"
      :autoplay="0"
      :is-prevent="false"
      :is-loop="false"
      :has-dots="false"
      @before-change="onSwiperChange"
    >
      <md-swiper-item>
        她对他很满意。走吧。好。他起身买单，腿却一拐一拐的。难怪他才华横溢，事业有成，却还是单身。趁着他买单，她赶紧悄悄走了。
      </md-swiper-item>
      <md-swiper-item>
        又是一年，她又遇到了他，他正牵着孩子的手，走的飞快。
      </md-swiper-item>
    </md-swiper>
  </div>
</template>

<script>
import {TabBar, Swiper, SwiperItem} from 'mand-mobile'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
  },
  data() {
    return {
      current: 0,
      items: [{name: 0, label: '标签1'}, {name: 1, label: '标签2'}],
    }
  },
  methods: {
    onSwiperChange(from, to) {
      this.current = to
    },
    onTabChange(item, index) {
      this.$refs.swiper.goto(index)
    },
  },
}

</script>

<style>
.md-example-child-tab-bar-6 .md-swiper {
  background: #FFF;
}
.md-example-child-tab-bar-6 .md-swiper .md-swiper-item {
  padding: 20px;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 1.5;
  color: #666;
}
</style>

首屏数量

TabBar 标签栏 - 图6

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-1">
    <md-tab-bar
      v-model="current"
      :items="items"
      :maxLength="5"
    />
  </div>
</template>

<script>
import {TabBar} from 'mand-mobile'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      current: 1,
      items: [
        {name: 1, label: '标签1'},
        {name: 2, label: '标签2'},
        {name: 3, label: '标签3'},
        {name: 4, label: '标签4'},
        {name: 5, label: '标签5'},
      ],
    }
  },
}

</script>

无下划线

TabBar 标签栏 - 图7

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-3">
    <md-tab-bar
      v-model="current"
      :items="items"
      :hasInk="false"
    />
  </div>
</template>

<script>
import {TabBar} from 'mand-mobile'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      current: 1,
      items: [{name: 1, label: '标签1'}, {name: 2, label: '标签2'}, {name: 3, label: '标签3'}],
    }
  },
}

</script>

监听事件

TabBar 标签栏 - 图8

        <template>
  <div class="md-example-child md-example-child-tabs md-example-child-tab-bar-5">
    <md-tab-bar
      v-model="current"
      :items="items"
      @change="onChange"
    />
  </div>
</template>

<script>
import {TabBar, Toast} from 'mand-mobile'

export default {
  name: 'tab-bar-demo',
  components: {
    [TabBar.name]: TabBar,
  },
  data() {
    return {
      current: 1,
      items: [{name: 1, label: '标签1'}, {name: 2, label: '标签2'}, {name: 3, label: '标签3'}],
    }
  },
  methods: {
    onChange(item, index, prevIndex) {
      Toast.info(`index: ${index}, prevIndex: ${prevIndex}, label: ${item.label}`)
    },
  },
}

</script>

API

TabBar Props

属性	说明	类型	默认值	备注
v-model	双向绑定的标签对象`name`	String	-	-
items	标签标题数组	Array<{name: String, label: String, disabled: Boolean}>	-	-
has-ink	是否显示下划线	Boolean	`true`	-
ink-length	下划线宽度	Number	`100`	该数值为下划线占标签按钮宽度的百分比，须在`0-100`之间
immediate	初始化后立即就触发一次`change`事件	Boolean	`false`	-

TabBar Methods

reflow()

重新计算样式布局

TabBar Events

@change(item, index, prevIndex)

标签索引发生变化事件

属性	说明	类型
item	选中的标签对象	Object
index	选中的标签索引	Number
prevIndex	上一标签索引	Number

TabBar Slot

<md-tab-bar>
  <template slot="item" slot-scope="{ item, currentName, index, items }">

  </template>
</md-tab-bar>