Uni-app学习过程（2）tabBar自定义

看官网，说真的，我不是个喜欢看文字的人，虽然很多东西都和vue类似，但还是犯困（可能这就是fw吧）

然后就去b站上找学习视频，说良心话，老师除了有点闷骚以外，讲是真的讲得好，拯救了我这种学习能力差的
link
学也学的差不多了，自己弄个小项目吧
然后找ui小姐姐弄个设计图，她直接来了个1280*800的，并且tabBar有7个（原生的满足不了一些样式），没办法只能自己封装
心里想着和vue应该差不多，然后将下头七个弄成了公共组件，心里想着在app里调用

<view class="bottom">
		<view :class="modular===index?'modular':'active'" v-for="(item,index) in list" :key="index"
			@click="navItemClick(item.path,index)">
			<uni-icons :type="item.type" class="icons"></uni-icons>
			<view>{{item.text}}</view>
		</view>
	</view>

<script>
	export default {
		data() {
			return {
				list: [{
						path: '',
						text: '首页',
						type: 'home-filled'
					},
					{
						path: '../user/user',
						text: '单位信息',
						type: 'paperclip'
					},
					{
						path: '',
						text: '干部名册',
						type: 'upload-filled'
					},
					{
						path: '',
						text: '人员信息',
						type: 'personadd-filled'
					},
					{
						path: '',
						text: '政策法规',
						type: 'locked-filled'
					},
					{
						path: '',
						text: '人才库',
						type: 'person-filled'
					},
					{
						path: '',
						text: '我的',
						type: 'contact-filled'
					}
				],
				modular: 0
			}
		},
		methods: {
			navItemClick(url,index) {
				this.modular=index
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

但，每次切换一个页面的时候，下头自定义的tabBar都会消失。总不可能每一个页面都写一个吧

然后看到了网上的一个大佬写了文章，还得去git下(原谅我忘记了地址…)，看完他代码，我立刻领悟

(狠狠扇自己一巴掌，怎么蠢到用组件去弄)

直接上代码

<view>
		<!-- 七个个子页面 -->
		<Home v-if="current == 0"></Home>
		<Company v-if="current == 1"></Company>
		<Roster v-if="current==2"></Roster>
		<!-- 底部tab样式 -->
		<view class="tab">
			<!-- 循环 tabbar里面的数据 -->
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tab-tiem" :class="[current == index ? 'active': '']" :data-index="index" @tap="tabSwitch">
					<view class="item-img">
						<image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>
					</view>
					<view class="item-name">
						{{item.text}}
					</view>
				</view>
			</block>
		</view>
	</view>

<script>
	import Home from '../home/home'
	import Company from '../company/company'
	import Roster from '../roster/roster'
	export default {
		data() {
			return {
				current: 0,
				tabbar: [{
						img: '../../static/icon/show1.png',  //未选中
						slectImg: '../../static/icon/show-blue.png', //已选中
						text: '首页',
					},
					{
						img: '../../static/icon/Company.png',
						slectImg: '../../static/icon/Company-blue.png',
						text: '单位信息',
					},
					{
						img: '../../static/icon/roster.png',
						slectImg: '../../static/icon/roster-blue.png',
						text: '干部名册',
					},
					{
						img: '../../static/icon/Administration.png',
						slectImg: '../../static/icon/Administration-blue.png',
						text: '人员信息',
					},
					{
						img: '../../static/icon/law.png',
						slectImg: '../../static/icon/law-blue.png',
						text: '政策法规',
					},
					{
						img: '../../static/icon/personnel.png',
						slectImg: '../../static/icon/personnel-blue.png',
						text: '人才库',
					},
					{
						img: '../../static/icon/personal.png',
						slectImg: '../../static/icon/personal-blue.png',
						text: '我的',
					}
				],
			}
		},
		methods: {
			tabSwitch(e) {
				let index = e.currentTarget.dataset.index
				this.current = index
			}
		},
		components: {
			Home,Company,Roster
		}
	}
</script>

<style lang="scss">
	.tab {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 1024;
		background-color: #FFFFFF;
		height: 90rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid #dee0e1;

		.tab-tiem {
			display: flex;
			width: 25%;
			// display: flex;
			align-items: center;
			// flex-direction: column;
			justify-content: center;
			color: #333333;
			height: 80rpx;
		}

		.item-img {
			padding-top: 4rpx;
		}

		.image {
			height: 40rpx;
			width: 40rpx;
		}

		.tab::before {
			color: #0066d2 ;
		}

		.item-name {
			font-size: 36rpx;
			transform: scale(0.8);
			transform-origin: center 100%;
			line-height: 10rpx;
		}

		.active {
			// color: var(--color) !important;
			color: #0066d2 ;
		}
	}
</style>

吃了基础不好的亏，大家当个笑话看就行