uni-app 自定义导航栏

效果图

 

隐藏小程序底部导航栏

 

封装组件

在 components 文件夹中新建一个 tabbar.vue 文件

<template>
	<view class="tabbar">
		<view class="tarbar-list">
			<view class="barPart" @click="changPage(index)" v-for="(list , index) in tabBar.list" :key="index">
				<image :src="selected == index ? list.selectedIconPath : list.iconPath"
					:style="{ bottom : index == 1 ? '30'+'rpx':'36'+'rpx', marginLeft : index == 1 ? '34'+'rpx':'42'+'rpx', width : list.iconWith+'rpx' , height : list.iconHeight+'rpx'}">
				</image>
				<view :style='{color: selected == index ? tabBar.selectedColor : tabBar.color}'>
					{{list.text}}
				</view>
			</view>
			<view class="release" @click="toRelease">
				<image class="release_icon" src="../static/首页/icon_发布.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBar: {
					color: '#A9A9A9',
					selectedColor: '#000000',
					list: [{
							iconPath: "../static/首页/物品丢失.png",
							selectedIconPath: "../static/首页/物品丢失-1.png",
							text: '失物招领',
							pagePath: "/pages/index/index",
							iconWith: '50',
							iconHeight: '50',
						},
						{
							iconPath: "../static/首页/跑腿APP.png",
							selectedIconPath: "../static/首页/跑腿APP-1.png",
							text: '校园跑腿',
							pagePath: "/pages/errand/errand",
							iconWith: '64',
							iconHeight: '64',
						},
					]
				},
				selected: this.current,
			}
		},
		//接收父组件传来的参数
		props: {
			//参数名
			current: {
				type: [Number, String], //参数类型
				default: 0 //默认值
			},
		},
		methods: {
			changPage(index) {
				//页面跳转
				uni.switchTab({
					url: this.tabBar.list[index].pagePath,
					fail: (err) => {
						console.log(err);
					}
				})
				//改变选中下标
				this.selected = index;
				if (this.selected == index) {
					return
				}
				this.$emit('change', index)
			},
			// 点击发布
			toRelease() {
				uni.navigateTo({
					url: '/pages/release/release',
				})
			}
		},
	}
</script>

<style scoped lang="less">
	.tarbar-list {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0 48rpx;
		box-sizing: border-box;
		height: 100rpx;
		background-color: #fff;
		border-radius: 26px 26px 0px 0px;
		box-shadow: 0px -2px 6px 0px rgba(225, 225, 225, 40);
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.release {
		position: absolute;
		background: linear-gradient(180deg, rgba(68, 193, 175, 1) 0%, rgba(10, 206, 206, 0) 100%);
		border-radius: 50%;
		left: 50%;
		top: -16rpx;
		transform: translateX(-50%);
		width: 112rpx;
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.release_icon {
			display: block;
			width: 60rpx;
			height: 60rpx;
			transform: translateY(-6rpx);
		}
	}

	.barPart {
		width: 20%;
		font-size: 24rpx;
	}

	.barPart>view {
		text-align: center;
	}

	.barPart>image {
		bottom: 36rpx;
		position: fixed;
		margin-left: 40rpx;
		object-fit: cover;
		object-position: center;
	}
</style>

页面引入组件

引入组件：

import tabbar from "../../components/tabbar.vue"

通过父子组件传参改变跳转后页面的默认下标：

<!-- 自定义导航栏 -->
<tabbar :current="current"></tabbar>


data() {
    return {
        current:0//默认下标
    }
},
components: {
    tabbar
},