打印/下载
参数
Vue案例
小程序案例

参数

  • v-model: ( Number | String ) 当前选中标签的名称或索引值

事件

  • change: ( Number | String ) 切换标签时触发

引入

import Tabbar from '@/components/tabbar'
Vue.component('wm-tabbar',Tabbar);

Html

<wm-tabbar v-model="tabBar.active" @change="navTab"></wm-tabbar>

JavaScript

export default {
  data(){
    return {
      tabBar: {active:0},
    }
  },
  methods:{

    /* 切换导航 */
    navTab(index){
      console.log(index);
    },

  },
}

引入

{
  "usingComponents": {
    "wm-tabbar": "/components/tabbar/index",
  },
  "navigationStyle": "custom"
}

基础用法

<wm-tabbar active="tabBar.active" bind:change="navTab"></wm-tabbar>

JavaScript

import store from '../../store'
import create from '../../libray/store/create'

create(store,{
  data:{
    tabBar: {active:0},
  },
  /* 切换导航 */
  navTab(e){
    this.setData({['tabBar.active']:e.detail});
  },
});
{{copy}}