tabbar props

属性	描述	类型	默认值
fixed	是否固定定位到底部	_ boolean _	false
zIndex	z-index的值	number	100
activeColor	active的颜色	string	rgb(19, 187, 134)
color	未选中的颜色	string	#999
options	tabbar的传入数据	array	[]
jumpType	路由跳转方式	string	replace
iconSize	icon大小	number	29
iconMarginBottom	icon的margin-bottom的值	number	0
height	高度	number	54

options的属性

名称	描述	类型	是否必传
path	跳转的路由地址	string	否
imgSrc	未选中的img图片地址	string	是
activeImgSrc	选中的img图片地址	string	是
label	文案	string	否
badgeVisible	是否展示badge	boolean	否
count	badge的value	number	否
color	badge的color	string	否
backgroundColor	badge的backgroundColor	string	否
max	badge的max	number	否

tabbar events

名称	描述	参数
change	change事件	index

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">基础用法</p>
      <vill-tab-bar
        :options="options"
        @change="handlechange"
      />
    </div>
    <div class="items">
      <p class="item_title">自定义</p>
      <vill-tab-bar
        :options="options2"
        activeColor="red"
        color="#cccccc"
        :iconSize="38"
        :height="68"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      options2: []
    }
  },
  created() {
    this.options =[{
        imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
        path: '',
        label: '首页',
        badgeVisible: false,
        count: 0
      },{
        imgSrc: this.$withBase('/assets/imgs/footer/55.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/22.png'),
        path: '',
        label: '推荐',
        badgeVisible: true,
        count: 0
      },{
        imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
        path: '',
        label: '接消息',
        badgeVisible: true,
        count: 100,
        max: 99
      },{
        imgSrc: this.$withBase('/assets/imgs/footer/66.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/33.png'),
        path: '',
        label: '我的',
        badgeVisible: true,
        count: 9
      }],
      this.options2 = [{
        imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
        path: '',
        label: '首页',
        badgeVisible: false,
        count: 0
      },{
        imgSrc: this.$withBase('/assets/imgs/footer/55.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/22.png'),
        path: '',
        label: '推荐',
        badgeVisible: true,
        count: 1,
        color: 'red',
        backgroundColor: 'orange'
      },{
        imgSrc: this.$withBase('/assets/imgs/footer/44.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/11.png'),
        path: '',
        label: '接消息',
        badgeVisible: true,
        count: 100
      },{
        imgSrc: this.$withBase('/assets/imgs/footer/66.png'),
        activeImgSrc: this.$withBase('/assets/imgs/footer/33.png'),
        path: '',
        label: '我的',
        badgeVisible: true,
        count: 9
      }]
  },
  methods: {
    handlechange(index) {
      console.log(`下标为:${index}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper_item_1{
  height: 300px;
  display: flex;
  background: orange;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-weight: 600;
  width: 100%;
  
}
.swiper_item_2{
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  >img{
    width: 100%;
    height: auto;
  }
}
</style>