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
			}]
		};
	},
	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>

屬性(事件)說明

代碼示例

• < 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組件搭配使用，效果更佳
本文來自：https://blog.csdn.net/poppingJ/article/details/108361892
僅供自己學習使用