navTabs 顶部导航栏

说明

1、该组件主要为小程序页面的顶部导航栏。 2、此组件在小程序中为公共组件。

使用

<template>
	<view class="onsite_supervision_class">
		<view style="background-color: #FFFFFF;">
			<nav-tabs :list="navList" :itemStyle="{
					width: '33.33%',
					height: '88rpx',
					boxSizing: 'border-box',
					position: 'relative'
				}" @click="stickyClick"></nav-tabs>
			<u-line color="rgba(0, 0, 0, 0.12)"></u-line>
		</view>
	</view>
</template>

参数说明

属性

属性	描述	类型	可选值	默认值
list	导航栏的选项内容	Array	——	[]
lineHeight	导航栏的高度	Number	——	2
lineWidth	导航栏选项的宽度	Number	——	53
lineColor	导航栏选中的栏目的底部线条表示，默认为蓝色	String	——	#0060C7
activeStyle	导航栏选中的栏目的字段颜色	String	——	#0060C7
inactiveStyle	导航栏未选中的栏目的字段颜色	String	——	rgba(0, 0, 0, 0.45)
scrollable	导航栏是否可以横向滚动	Boolean	——	true
itemStyle	导航栏选项需要设置的样式	Object	——	{width: '20%',height: '88rpx',boxSizing: 'border-box'}
current	目前选中的导航选项的索引值	Number	——	0

事件

事件名称	说明	回调参数
click	点击导航栏的选项后，返回给父组件的选中选项的索引	String: 选中的选择项的code

工具源码及综合示例参考

组件源码 (opens new window) 综合实例 (opens new window)