Tabbar 标签栏

提供 wx-tabbar 和 wx-tabbar-item 两个组件。

基本用法

<wx-tabbar v-model="t" class="tabbar">
  <wx-tabbar-item label="微信" :icon="chatIcon" :active-icon="chatActiveIcon" :badge="8">
    <div class="page__bd">微信</div>
  </wx-tabbar-item>
  <wx-tabbar-item label="通讯录" :icon="icon">
    <div class="page__bd">通讯录</div>
  </wx-tabbar-item>
  <wx-tabbar-item label="发现" :icon="icon" badge>
    <div class="page__bd">发现</div>
  </wx-tabbar-item>
  <wx-tabbar-item label="我" :icon="icon">
    <div class="page__bd">我</div>
  </wx-tabbar-item>
</wx-tabbar>

<script>
import icon from "../assets/icon-tabbar.png";
import chatIcon from "../assets/icon-chat-outline.png";
import chatActiveIcon from "../assets/icon-chat.png";

export default {
  data() {
    return {
      icon,
      chatIcon,
      chatActiveIcon,
      t: 0
    };
  }
};
</script>

Tabbar Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值	String/Number	-	-
activeColor	选中标签项颜色	String	-	-

Tabbar Events

事件名称	说明	回调参数
itemClick	点击标签项时触发	index: String/Number，绑定值

Tab-item Attributes

参数	说明	类型	可选值	默认值
name	标签项名称，用于标签栏绑定	String	-	-
label	标签项标题	String	-	-
icon	标签项图标	String	-	-
activeIcon	标签项选中图标	String	-	-
badge	标签项徽章	String/Number	-	-

标签栏