ec.uniapp-master/components/lf-tabbar/lf-tabbar.vue

<template>
	<view>
		<view class="occupy-position"></view>
		<view class="content">
			<view class="tabbar-box">
				<view class="tab-item" 
					:class="{'tab-active': currentTabBar == index}"
					:style="{'width': 100 / show_count +'%'}" 
					@click="clickTab(item, index)"
					v-if="item.show"
					v-for="(item, index) in tabbars" :key="index">
					<view class="tab-icon">
						<text class="lf-font-40 lf-iconfont" :class="item.icon"></text>
					</view>
					<view class="tab-name">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		props: {
			type: {
				type: String, // 默认跳转方式redirect，可选switch
				default: 'redirect'
			}
		},
		data(){
			return {
				show_count: 0
			}
		},
		computed: {
			...mapGetters(['currentTabBar', 'tabbars', 'isShowTabBar'])
		},
		created(){
			// 组件被创建时检查当前在哪个页面，然后校验currentTabBar是否与之匹配
			let pages = getCurrentPages();
			let page = pages[pages.length - 1].route;
			let tabbars = this.tabbars;
			let tabbar_name = tabbars[this.currentTabBar].path;
			let current = 0;
			let show_count = 0;
			tabbars.map((item, index) => {
				if(item.path == '/'+ page){
					current = index;
				}
				if(item.show){
					show_count++;
				}
			})
			this.show_count = show_count;
			if(tabbar_name != '/'+ page){
				this.$store.commit('setCurrentTabBar', current);
			}
		},
		methods: {
			clickTab(item, index){
				if(this.currentTabBar == index) return;
				this.$store.commit('setCurrentTabBar', index);
				uni.vibrateShort();
				this.$url(item.path, {type: this.type});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lf-font-40{
		font-size: 40rpx;
	}
	.occupy-position{
		width: 750rpx;
		height: 120rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.content{
		width: 750rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		border-radius: 60rpx 60rpx 0 0;
		box-shadow: 0rpx -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		box-sizing: content-box;
		.tabbar-box{
			width: 100%;
			height: 100rpx;
			display: flex;
			.tab-item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.tab-name{
					font-size: 24rpx;
					color: #777777;
				}
				&.tab-active{
					.tab-icon{
						background-color: #15716E;
						width: 60rpx;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						// transform: translateY(-20rpx) scale(1.4);
						border-radius: 50%;
						color: #FFFFFF;
						overflow: hidden;
						animation: wobble 1s .2s ease both;
						text{
							transform: scale(0.8);
						}
					}
					.tab-name{
						color: #15716E;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	@keyframes wobble{
		0%{transform:translateX(0%)}
		15%{transform:translateX(-25%) rotate(-5deg)}
		30%{transform:translateX(20%) rotate(3deg)}
		45%{transform:translateX(-15%) rotate(-3deg)}
		60%{transform:translateX(10%) rotate(2deg)}
		75%{transform:translateX(-5%) rotate(-1deg)}
		99%{transform:translateX(0%)}
		100%{transform: translateY(-20rpx) scale(1.4);}
	}

</style>