底部Taber的抽取

1.会抽取一个布局样式
2.布局样式里面抽取一个底部样式

这个是layout的代码

<template>
	<view class="layout-wrapper">
		<view class="layout-content">
			<slot></slot>
		</view>
		<!-- 底部 -->
		<Tabbar :activeIndex="activeIndex"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from './tabbar.vue'
	export default {
		name:"layout",
		props: ['activeIndex'],
		components: {
			Tabbar
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.layout-wrapper {
		width: 100vw;
		height: 100vh;
		.layout-content {
			height: calc(100vh - 120rpx);
			overflow-y: auto;
		}
	}
</style>

这个是底部的代码

<template>
	<view class="tabbar-wrapper">
		<text v-for="(item, index) in tabbarList" :key="item.pagePath" @click="clickTabbar(item)"
			:class="{active: index === activeIndex}"
		>
			{{ item.text }} - {{ activeIndex }}
		</text>
	</view>
</template>

<script>
	export default {
		props: ['activeIndex'],
		data() {
			return {
				tabbarList: [
					{
						pagePath: '/pages/xingqing/xingqing',
						text: '心情'
					},
					{
						pagePath: '/pages/add/add',
						text: '加号'
					},
					{
						pagePath: '/pages/my/my',
						text: '我的'
					},
					
				]
			}
		},
		methods: {
			clickTabbar(item) {
				uni.switchTab({
					url: item.pagePath
				})
			}
		}
	}
</script>

<style>
	.tabbar-wrapper {
		height: 120rpx;
		width: 100%;
		border-top: 1px solid red;
		box-sizing: border-box;
	}
	.active {
		color: red;
	}
</style>

记住要配置taberbar 然后在app。vue里面隐藏就好了