kitchendDevice/components/tabbar.vue

<template>
	<view class="tabbar">
		<view class="list" v-for="(ite,ind) in list" :key="ind">
			<image :src="ite.iconPath"></image>
			<text>{{ite.text}}</text>
		</view>

	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				list: [{
						"pagePath": "pages/index/index",
						"iconPath": "../static/home.png",
						"selectedIconPath": "../static/home01.png",
						"text": "首页"
					},
					{
						"pagePath": "pages/menu/menu",
						"iconPath": "../static/cai.png",
						"selectedIconPath": "../static/cai01.png",
						"text": "菜谱"
					},
					{
						"pagePath": "pages/add/add",
						"iconPath": "../static/add.png",
						"selectedIconPath": "../static/add.png",
						"text": ""
					},
					{
						"pagePath": "pages/count/count",
						"iconPath": "../static/ji.png",
						"selectedIconPath": "../static/ji01.png",
						"text": "计食器"
					},
					{
						"pagePath": "pages/me/me",
						"iconPath": "../static/me.png",
						"selectedIconPath": "../static/me01.png",
						"text": "我的"
					}

				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		border-top: 1px solid #dfdfdf;
		position: fixed;
		left: 0;
		right: 0;
		height: 55px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				display: inline-block;
				width: 100%;
				text-align: center;
			}
		}

		:nth-child(3).list {
			image {
				width: 42px;
				height: 42px;
			}

		}
	}
</style>