uni-app顶部导航栏组件

先看看效果:

1.在app.vue中引入全局样式

<style>
	/*每个页面公共css */
	@import './common/uni.css';
	/*引入css3动画库*/
	@import './common/animate.css';
	
</style>

可以通过创建hello-uniapp项目,uni.css文件在项目的common文件夹下

2.在项目根目录components文件夹下新建一个vue文件

这里我命名为index.vue,文件内容如下:

<template>
	<view>
		<!--顶部导航栏-->
		<view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(tabBar,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
						{{tabBar.name}}
						<view class="swiper-tab-line">
						</view>
					</view>
				</block>
				
			</scroll-view>
		</view>
		
		<!--内容区-->
		<view class="uni-tab-bar">
			<swiper :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(content,index) in contentList" :key="index" >
					<view class="swiper-item">{{content}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		
	</view>
	
	
</template>

<script>
	
	export default {
		data() {
			return {
				tabIndex: 0,	//选中标签栏的序列
				contentList: [
								"关注",
								"推荐",
								"热点",
								"体育",
								'财经',
								'娱乐',
							 ],
				tabBars:[
					{
						name: '关注',
						id: 'guanzhu'
					},
					{
						name: '推荐',
						id: 'tuijian'
					},
					{
						name: '热点',
						id: 'redian'
					},
					{
						name: '体育',
						id: 'tiyu'
					},
					{
						name: '财经',
						id: 'caijing'
					},
					{
						name: '娱乐',
						id: 'yule'
					}
				],
				swiperHeight: 0
			
			}
		},
		components:{
			
		},
		onLoad() {
			
			
		},
		methods: {
			toggleTab(index){
				console.log(index)
				this.tabIndex = index
			},
			//滑动切换swiper
			tabChange(e){
				console.log(e.detail)
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
				
			}
		}
	}
</script>

<style>
	.swiper-tab-list{
		color: #969696;
		font-weight: bold;
	}
	.uni-tab-bar .active{
		color: #343434;
	}
	
	.active .swiper-tab-line{
		border-bottom: 6upx solid #FEDE33;
		width: 70upx;
		margin: auto;
		border-top: 6upx solid #FEDE33;
		border-radius: 20upx;
	}
	.uni-swiper-tab{
		border-bottom: 1upx solid #eeeeee;
	}
	
	

</style>

接下来可以在其他文件中导入使用了。