Tabbar

底部选项卡。

引入

  1. import { Tabbar, TabbarItem } from 'we-vue'
  2. Vue.use(Tabbar).use(TabbarItem)

例子

  1. <template>
  2. <wv-tabbar>
  3. <wv-tabbar-item to="/" is-on>
  4. <span slot="icon" style="display: inline-block; position: relative;">
  5. <img class="weui-tabbar__icon" src="icon.png" slot="icon">
  6. <wv-badge style="position: absolute;top: -2px;right: -13px;">8</wv-badge>
  7. </span>
  8. 微信
  9. </wv-tabbar-item>
  10. <wv-tabbar-item to="/tabbar">
  11. <img class="weui-tabbar__icon" src="icon.png" slot="icon"> 通讯录
  12. </wv-tabbar-item>
  13. <wv-tabbar-item to="/">
  14. <span slot="icon" style="display: inline-block; position: relative;">
  15. <img class="weui-tabbar__icon" src="icon.png" slot="icon">
  16. <wv-badge is-dot style="position: absolute;top: 0;right: -6px;">8</wv-badge>
  17. </span>
  18. 发现
  19. </wv-tabbar-item>
  20. <wv-tabbar-item to="/profile">
  21. <img class="weui-tabbar__icon" src="icon.png" slot="icon">
  22. </wv-tabbar-item>
  23. </wv-tabbar>
  24. </template>

API

  • tabbar

    参数类型说明可选值默认值
    fixedBoolean是否固定false
  • tabbar-item

    参数类型说明可选值默认值
    toString跳转地址
    is-onBoolean是否为当前选中false

Slots

  • tabbar

    name描述
    -一个或多个 tabbar-item 组件
  • tabbar-item

    name描述
    -选项卡项内容