uniapp——底部导航（Dcloud底部选项卡模版）

简介

本文是基于Dcloud底部选项卡模版进行小改动，然后加入自己的理解。
效果图：

项目结构：

如果不想要加号的页面，可以把tabbar-3改成跟tabbar-1一样就好。

tabbar-1.vue的代码为：

<template>
	<view class="content">
		页面 - 1
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	methods: {}
};
</script>

<style>
.content {
	text-align: center;
	height: 400upx;
	margin-top: 200upx;
}
</style>

tabbar-3.vue的代码为：

<template>
	<view class="content" :class="{'active':active}">
		<image class="logo" :class="{'active':active}" src="../../../static/logo.png"  mode="aspectFit"></image>
		<view class="tabbar-box-wrap">
			<view class="tabbar-box">
				<view class="tabbar-box-item" @click="goToPage('/pages/tabbar/tabbar-3/tabbar-3-detial/tabbar-3-release/tabbar-3-release')">
					<image class="box-image" src="../../../static/img/release.png" mode="aspectFit"></image>
					<text class="explain">发图文</text>
				</view>
				<view class="tabbar-box-item" @click="goToPage('/pages/tabbar/tabbar-3/tabbar-3-detial/tabbar-3-video/tabbar-3-video')">
					<image class="box-image" src="../../../static/img/video.png" mode="aspectFit"></image>
					<text class="explain">发视频</text>
				</view>
				<view class="tabbar-box-item" @click="goToPage('/pages/tabbar/tabbar-3/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
					<image class="box-image" src="../../../static/img/qa.png" mode="aspectFit"></image>
					<text class="explain">提问</text>
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
export default {
	data() {
		return {
			active: false
		};
	},
	onLoad() {},
	onShow() {
		// setTimeout(() => {
		this.active = true;
		// }, 500);
	},
	onHide() {
		this.active = false;
	},
	methods: {
		goToPage(url) {
			if (!url) return;
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* #ifdef H5 */
	height: calc(100vh - var(--window-bottom) - var(--window-top));
	/* #endif */
	/* #ifndef H5 */
	height: 100vh;
	/* #endif */
	transition: opacity 0.3s;
	background: #999;
	opacity: 0;
	&.active {
		opacity: 1;
	}
	.logo {
		position: relative;
		margin-top: -400upx;
		width: 200upx;
		height: 200upx;
		// z-index: -1;
		opacity: 0;
		transition: opacity 0.3s;
		&.active {
			opacity: 1;
		}
	}
}
.tabbar-box-wrap {
	position: absolute;
	width: 100%;
	padding: 50upx;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	.tabbar-box {
		position: relative;
		display: flex;
		width: 100%;
		background: #fff;
		border-radius: 20upx;
		padding: 15upx 20upx;
		box-sizing: border-box;
		z-index: 2;
		box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
		&:after {
			content: '';
			position: absolute;
			bottom: -16upx;
			left: 0;
			right: 0;
			margin: auto;
			width: 50upx;
			height: 50upx;
			transform: rotate(45deg);
			background: #fff;
			z-index: 1;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
			border-radius: 2px;
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #ffffff;
			border-radius: 20upx;
			z-index: 2;
		}
		.tabbar-box-item {
			// position: relative;
			width: 100%;
			z-index: 3;
			margin: 10upx;
			color: $uni-color-subtitle;
			text-align: center;
			font-size: $uni-font-size-base;
			.box-image {
				width: 100%;
				height: $uni-img-size-lg;
			}
		}
	}
}
</style>

tabbar-3-qa.vue的代码为：

<template>
	<view class="content">
		页面 - 提问
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	};
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
		margin-top: 200upx;
	}
</style>

pages.json

{
	"pages": [
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tabbar/tabbar-1/tabbar-1",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar-2/tabbar-2",
			"style": {}
		},
		{
			"path": "pages/tabbar/tabbar-3/tabbar-3",
			"style": {}
		},
		{
			"path": "pages/tabbar/tabbar-4/tabbar-4",
			"style": {}
		},
		{
			"path": "pages/tabbar/tabbar-5/tabbar-5",
			"style": {}
		},
		{
			"path": "pages/tabbar/tabbar-3/tabbar-3-detial/tabbar-3-release/tabbar-3-release",
			"style": {}
		},
		{
			"path": "pages/tabbar/tabbar-3/tabbar-3-detial/tabbar-3-video/tabbar-3-video",
			"style": {}
		},
		{
			"path": "pages/tabbar/tabbar-3/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa",
			"style": {}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"borderStyle": "black",
		"backgroundColor": "#333",
		"color": "#8F8F94",
		"selectedColor": "#f33e54",
		"list": [{
				"pagePath": "pages/tabbar/tabbar-1/tabbar-1",
				"iconPath": "static/img/tabbar/home.png",
				"selectedIconPath": "static/img/tabbar/homeactive.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/tabbar/tabbar-2/tabbar-2",
				"iconPath": "static/img/tabbar/guanzhu.png",
				"selectedIconPath": "static/img/tabbar/guanzhuactive.png",
				"text": "关注"
			},
			//#ifdef MP-WEIXIN
			{
				"pagePath": "pages/tabbar/tabbar-3/tabbar-3",
				"iconPath": "static/img/tabbar/add.png",
				"selectedIconPath": "static/img/tabbar/addactive.png",
				"text": "发布"
			},
			//#endif
			//#ifndef MP-WEIXIN
			{
				"pagePath": "pages/tabbar/tabbar-3/tabbar-3",
				"iconPath": "static/img/tabbar/add.png",
				"selectedIconPath": "static/img/tabbar/addactive.png"
			},
			//#endif
			{
				"pagePath": "pages/tabbar/tabbar-4/tabbar-4",
				"iconPath": "static/img/tabbar/news.png",
				"selectedIconPath": "static/img/tabbar/newsactive.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/tabbar/tabbar-5/tabbar-5",
				"iconPath": "static/img/tabbar/me.png",
				"selectedIconPath": "static/img/tabbar/meactive.png",
				"text": "我"
			}
		]
	}
}

其他页面的代码都是类似的。这里就不一一的列出来了，最后给出代码的下载地址：https://download.csdn.net/download/wy313622821/13217740