NavBar 标签页

介绍

顶部选项卡，与 Tabbar 类似。

引入

"usingComponents": {
	"m-navbar-group": "mind-ui-weapp/navbar-group/index",
	"m-navbar": "mind-ui-weapp/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 值