基于vue技术的tabBar组件

使用方式：

• 安装组件 npm i quark-tabbar
• template 中调用组件：

<QuarkTabbar @tab-switch="tabSwitch" type="card" :tabbarList="tabList"></QuarkTabbar>

对应的js

import QuarkTabbar from 'quark-tabbar';
export default {
  components:{
    QuarkTabbar  //组件中引入该组件
  },
  data() {
    return {
      tabList:[
        {
          'tabTitle':'日用品',
          'curr':true,
          'icon':'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
          'activeIcon':'http://img20.360buyimg.com/uba/jfs/t28675/125/569589124/2710/fe1b0e7c/5bf79218Nbc49fc24.jpg',
          'href':'###'
        },
        {
          'tabTitle':'服饰',
          'curr':false,
          'icon':'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
          'activeIcon':'http://img14.360buyimg.com/uba/jfs/t28468/128/565494642/3313/ce508dd6/5bf79214Nab2a3076.jpg',
          'href':'###'
        },
        {
          'tabTitle':'娱乐',
          'curr':false,
          'icon':'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
          'activeIcon':'http://img11.360buyimg.com/uba/jfs/t27370/260/2117900302/3274/bd097e85/5bf7921bNafc526e2.jpg',
          'href':'###'
        }
      ]
    };
  },
  methods: {
      tabSwitch:function(value,index){
        console.log(index);
      }
  }
};

参数说明

Prop

| 字段 | 说明 | 类型 | 默认值 |----- | ----- | ----- | ----- | type | 页签栏的样式 based/card | String | based | tabbarList | 渲染数据 | Array | -- | tabTitle | 标签页的标题 | String | -- | curr | 是否为选中的标签页 | Booble | false | icon | 标签页显示的图片 | String | -- | activeIcon | 标签页的活动状态显示的图片 | String | -- | href | 标签页的跳转链接 | String | --

Event

| 事件名称 | 说明 | 回调参数 |----- | ----- | ----- | tabSwitch | 切换页签时触发事件 | 点击的索引值和对应的数据