quark-tabbar v1.0.7

基于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

Event