uniapp常用组件——顶部导航选项栏（可滑动）

uniapp常用组件——顶部导航标签栏（可滑动）

使用uniapp开发项目时，顶部导航栏是经常会有的功能需求，然而uniapp官网的导航栏组件有时并不那么尽人意，于是我自定义了一个组件，将其封装了起来，并将背景颜色，选中文字颜色，底部横条颜色等外抛，以便使用者根据需求来选择，完整代码在文章最后已给出

引用方式

1. 在script中导入并在component中注册

import topTabbar from '@/components/top-tabbar/top-tabbar.vue'
export default {
		components: {topTabbar},
		data() {
			return {
				//将选中标签的索引绑定为tabIndex，以便后续的调用
				tabIndex: 0,
				//导航栏标签列表数组数据结构示例，name为必须属性
				tabBars: [{
					name: "全部",
					id: 0
				}, {
					name: "报名中",
					id: 1
				}, {
					name: "待审核",
					id: 2
				}, {
					name: "预备中",
					id: 3
				}, {
					name: "进行中",
					id: 4
				}, {
					name: "已结束",
					id: 5
				}]
			};
		},
		methods：{
			//点击导航栏标签改变当前索引
			toggleTab(index) {
				this.tabIndex = index
			},
		}

2. 在template模板中引用

<top-tabbar :tabIndex="tabIndex" :tabBars="tabBars" @toggleToptab="toggleTab" 
		selectedBottomColor="#30c58d" selectedTextColor="#343434" textColor="#7d7e80" 
		bgColor="#ffffff"></top-tabbar>

属性(事件)说明

属性(事件)名	类型	默认值	说明
tabIndex	Number	0	选中标签栏的索引
tabBars	Array	-	导航栏标签内容
selectedBottomColor	String	‘#30c58d’	选中时底部横条颜色
bgColor	String	‘#ffffff’	导航区背景颜色
selectedTextColor	String	‘#343434’	选中时文字颜色
textColor	String	‘#7d7e80’	默认文本颜色
@toggleToptab	Function	-	点击导航栏标签触发

代码示例

• < template >

<template>
	<view>
		<!--顶部导航栏-->
		<view class="uni-top-tabbar">
			<scroll-view scroll-x class="uni-swiper-tab" :style="{backgroundColor:bgColor}">
				<block v-for="(tabBar,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active': tabIndex==index}" :style="{color:tabIndex==index?selectedTextColor:textColor}" @tap="toggleTab(index)">
						{{tabBar.name}}
						<view class="swiper-tab-line" :style="{backgroundColor:tabIndex==index?selectedBottomColor:bgColor}"></view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

• < script >

<script>
	export default {
		name: "topTabbar",
		props: {
			//选中标签栏的索引
			tabIndex: {
				type: Number,
				default: 0
			},

			//导航栏标签内容
			tabBars: {
				type: Array,
				default: [{
						name: '标签1',
						id: 1
					},
					{
						name: '标签2',
						id: 2
					},
					{
						name: '标签3',
						id: 3
					},
					{
						name: '标签4',
						id: 4
					},
					{
						name: '标签5',
						id: 5
					},
					{
						name: '标签6',
						id: 6
					}
				]
			},
			
			//选中时底部横条颜色
			selectedBottomColor:{
				type:String,
				default:'#30c58d'
			},
			
			//导航区背景颜色
			bgColor:{
				type:String,
				default:'#ffffff'
			},
			
			//选中时文字颜色
			selectedTextColor:{
				type:String,
				default:'#343434'
			},
			
			//默认文本颜色
			textColor:{
				type:String,
				default:'#7d7e80'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			//点击导航栏标签触发
			toggleTab(index) {
				this.$emit("toggleToptab", index)
			}
		}
	}
</script>

• < style >

<style lang="scss">	
	.uni-top-tabbar {
		/* 以下3项设置用于开启底部阴影显示 */
		/* position: relative;
		z-index: 1;
		overflow: visible; */
	
		.uni-swiper-tab {
			height: 100rpx;
			//设置底部阴影
			//box-shadow: rgba(170, 170, 170, 0.5) 0 2rpx 8rpx 0;
	
			.swiper-tab-list {
				font-size: 28rpx;
				font-weight: normal;
				line-height: 82rpx;
				//设置标签宽度
				width: 22%;
			}
	
			.active {
				.swiper-tab-line {
					height: 6rpx;
					width: 82rpx;
					margin: auto;
				}
			}
		}
	}
</style>

该组件支持开启导航栏底部阴影，需使用者自行在组件内部CSS中开启设置，对于每个标签栏下的具体内容设置，可结合uniapp中swiper组件搭配使用，效果更佳