BottomNavbar 底部导航栏，用于提供页面的导航能力。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 items 属性设置导航栏数据，isFixed 属性设置导航栏是否固定在底部。

<wui-bottom-navbar :items="items" :isFixed="false"></wui-bottom-navbar>

//数据格式一
const items = ref(['最新动态', '学习平台', '加入我们'])

固定在底部，二级菜单

通过 items 属性设置导航栏数据，left 属性设置导航栏文本与图标之间距离，二级菜单使用 wui-bubble-box 组件实现。

<wui-bottom-navbar :items="options" left="8" @init="init" @click="onClick"></wui-bottom-navbar>
<!--气泡框组件使用请查看具体文档-->
<wui-bubble-box width="200" :size="28" direction="top" :show="show" :triangle="{left:100}" :bottom="height" :left="32" :items="subItems" @click="subClick" @close="onClose"></wui-bubble-box>

//数据格式二
const options = ref( [{
    text: '最新动态',
    name: 'menu',
    size: 24
}, {
    text: '学习平台'
}, {
    text: '加入我们'
}])
    //二级菜单
const subItems = ref([{
    text: '官方新闻'
}, {
    text: '线下活动'
}, {
    text: '商城优惠'
}])
const height =ref(100)
const show =ref(false)

//导航栏初始化事件
const init = (e)=> {
    height.value = Math.ceil(e.height / e.windowWidth * 750)
}
//导航栏点击事件
const onClick = (e)=> {
    console.log(e)
    if (e.index === 0) {
        show.value = true
    } else {
        Toast(e.text)
    }
}
//二级菜单点击事件
const subClick = (e)=> {
    console.log(e)
    Toast(subItems.value[e.index].text)
    onClose()
}
//关闭二级菜单
const onClose = ()=> {
    show.value = false
}

//items 数据格式说明

//数据格式一，字符串数组
items: ['历史文章', '面试总结', '欢迎投稿']

//数据格式二，以下为约定属性，其他属性可自行扩展
items: [{
	//item文本
	text: '最新动态',
	//字体图标name值，具体值参考wui-icon组件，传值后优先级大于图片，可选
	name: '',
	//字体图标字体大小，单位rpx，可选
	size: 24,
	//字体图标颜色，可选
	color: '',
	//图片图标src地址，可选
	src: 'xxxxxxxxxx.png',
	//图片宽度，单位rpx，默认40，可选
	width: 40,
	//图片高度，单位rpx，默认40，可选
	height: 40
}]

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
items	Array	导航栏数据，具体格式见下方说明	[ ]	-
height	Number, String	导航栏高度，单位rpx	100	-
size	Number, String	导航栏字体大小，单位rpx	28	-
fontWeight	Number, String	导航栏字体字重	400	-
color	String	导航栏字体颜色	#333333	-
left	Number, String	导航栏字体与图标之间间隔，单位rpx。仅有字体图标或图片图标时有效	0	-
background	String	导航栏背景颜色	#FFFFFF	-
isBorder	Boolean	是否显示上边框线条	true	-
isDivider	Boolean	是否显示item之间分隔线	true	-
lineColor	String	上边框和分隔线颜色	#EEEEEE	-
isFixed	Boolean	导航栏是否固定在底部	true	-
zIndex	Number, String	导航栏层级z-index值	900	Nvue端不支持，默认越靠后的元素层级越高
safeArea	Boolean	是否适配底部安全区	true	-

Events

温馨提示：@init 事件返回的高度包含底部安全距离

事件名	说明	回调参数
@click	点击导航栏item项时触发	{ ndex : item项索引值 ...items[index] }
@init	导航栏初始化事件	{ height:导航栏高度 单位px windowWidth:屏幕宽度 单位px }