# NavBar 标签页
# 介绍
顶部选项卡，与 Tabbar 类似。
# 引入
"usingComponents": {
"m-navbar-group": "/dist/navbar-group/index",
"m-navbar": "/dist/navbar/index"
}
# 示例
# 基础用法
<m-navbar-group bind:click="onClick" bind:change="onChange">
<m-navbar title="标签1" name="tab1" />
<m-navbar title="标签2" name="tab2" />
<m-navbar title="标签3" name="tab3" />
</m-navbar-group>
# 两边自定义内容
<view>
<view>自定义内容</view>
<m-navbar-group custom-class="custom-group" bind:click="onClick" bind:change="onChange">
<m-navbar title="标签1" name="tab1" />
<m-navbar title="标签2" name="tab2" />
<m-navbar title="标签3" name="tab3" />
</m-navbar-group>
<view>自定义内容</view>
</view>
# 设置默认选中项
<m-navbar-group name="tab4" bind:click="onClick" bind:change="onChange">
<m-navbar title="标签1" name="tab1" />
<m-navbar title="标签2" name="tab2" />
<m-navbar title="标签3" name="tab3" />
<m-navbar title="标签4" name="tab4" />
<m-navbar title="标签5" name="tab5" />
<m-navbar title="标签6" name="tab6" />
<m-navbar title="标签7" name="tab7" />
</m-navbar-group>
# 徽章统计
<m-navbar-group bind:click="onClick" bind:change="onChange">
<m-navbar title="标签1" name="tab1" />
<m-navbar title="标签2" name="tab2" count="8" />
<m-navbar title="标签3" name="tab3" />
<m-navbar title="标签4" name="tab4" count="100" />
</m-navbar-group>
Page({
// 点击标签时触发
onClick({ detail }) {
console.log(detail)
},
// 标签激活后触发
onChange({ detail }) {
console.log(detail)
}
})
# NavbarGroup Properties
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| acive-name | 默认选中的标签 | String | — | — |
| acive-color | 选中标签的文字颜色 | String | — | — |
| line-width | 选中底线长度（单位 rpx） | Number | — | 与当前标签等宽 |
| line-height | 底线高度（单位 rpx）,0 时不展示 | Number | — | 与当前标签等宽 |
| line-color | 选中底线颜色 | String | — | — |
| disabled | 禁止点击 | Boolean | — | fasle |
# Navbar Properties
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 标签名称，必填，选中时事件中返回 | String | — | — |
| title | 标签名称 | String | — | — |
| count | 徽章统计值 | Number | — | — |
# Events
| 名称 | 说明 | 返回值 |
|---|---|---|
| bind:click | 点击标签时触发 | 标签对应的 name 值 |
| bind:change | 标签激活后触发 | 标签对应的 name 值 |