uni-app微信小程序导航栏

index.vue

<template>
	<view class="content">
		<tabBar/>
	</view>
</template>

<script>
	import tabBar from "../components/tabBar.vue"
	export default {
		componnets: {
			tabBar
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

在app.json新建一个组件

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/components/tabBar",
			"style": {}
		}
    ],

tabBar.vue

<template>
	<view class="tabView">
		<view class="tabItem" 
		@tap="chooseIndex(index)" 
		v-for="(item, index) in tabList" 
		:key="index" 
		:class="activeIndex === index ? 'active':''"
		>
			<view class="tabText">{{item}}</view>
			<view class="bottomLine"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['精选', '图书', '童书', '服装', '百货'],
				activeIndex: 0
			};
		},
		methods: {
			chooseIndex:function(index) {
				this.activeIndex = index;
			}
		}
	}
</script>

<style lang="less">
	.tabView {
		display: flex;
		justify-content: space-between;
		.tabItem {
			display: flex;
			flex-direction: column;
			.tabText {
				color: #757576;
				font-size: 24upx;
				margin: 20upx;
			}
		}
		.active {
			.tabText {
				color: #000;
			}
			.bottomLine {
				border-bottom: 1upx solid #007AFF;
			}
		}
	}
</style>

实现导航栏的效果