TabBar 面板

概述

位于 APP 底部，方便用户在不同功能模块之间进行快速切换。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-tab-bar": "../../dist/tab-bar/index",
  3.     "i-tab-bar-item": "../../dist/tab-bar-item/index"
  4. }

示例

  1. 基本用法
  3. <i-tab-bar current="{{ current }}" bindchange="handleChange">
  4.     <i-tab-bar-item key="homepage" icon="homepage" current-icon="homepage_fill" title="Home"></i-tab-bar-item>
  5.     <i-tab-bar-item key="group" icon="group" current-icon="group_fill" title="Friends"></i-tab-bar-item>
  6.     <i-tab-bar-item key="remind" icon="remind" current-icon="remind_fill" count="3" title="Notice"></i-tab-bar-item>
  7.     <i-tab-bar-item key="mine" icon="mine" current-icon="mine_fill" dot title="My"></i-tab-bar-item>
  8. </i-tab-bar>
  10. 自定义主题色
  12. <i-tab-bar current="{{ current }}" color="#f759ab" bindchange="handleChange">
  13.     <i-tab-bar-item key="homepage" icon="homepage" current-icon="homepage_fill" title="首页"></i-tab-bar-item>
  14.     <i-tab-bar-item key="group" icon="group" current-icon="group_fill" title="朋友"></i-tab-bar-item>
  15.     <i-tab-bar-item key="remind" icon="remind" current-icon="remind_fill" title="通知"></i-tab-bar-item>
  16.     <i-tab-bar-item key="mine" icon="mine" current-icon="mine_fill" title="我的"></i-tab-bar-item>
  17. </i-tab-bar>
  1. Page({
  2.     data: {
  3.         current: 'homepage'
  4.     },
  6.     handleChange ({ detail }) {
  7.         this.setData({
  8.             current: detail.key
  9.         });
  10.     }
  11. });

API

TabBar properties

属性说明类型默认值
i-class自定义 class 类名String-
current当前所在的标签的 key 值String-
color主题色String-
fixed是否固定在底部Booleanfalse

TabBar events

事件名说明返回值
bind:change切换标签时触发{ key }

TabBarItem properties

属性说明类型默认值
i-class自定义 class 类名String-
icon图标String-
current-icon当前面板被选中时的图标String-
img自定义图片 urlString-
current-img当前面板被选中时的自定义图片 urlString-
key标签的唯一标识String-
title名称String-
dot是否显示小红点Booleanfalse
count徽标数Number0