IHG/components/TabBar/tabbar.vue

<template>
	<view class="tab-bar" :style="{'--padding-bottom':`${wagesheight}`+'rpx'}">
		<view class="content main-between cross-center">
			<view v-for="(item,index) in list" :key="index" class="tab-item dir-top-wrap cross-center main-center"
				:class="{active: active === index}" @click="handleSwitch(index)">
				<view class="icon">
					<image
						:src="active === index ? (item.selected_icon ? item.selected_icon : item.selectedIconPath) : (item.icon ? item.icon : item.iconPath)"
						mode="aspectFit" />
				</view>
				<text>{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'TabBar',
		data() {
			return {
				wagesheight: '',
				color: '#CBC8C7',
				selectedColor: '#FF6200',
				// types: {
				// 	1: {
				// 		'pagePath': '/pages/index/index',
				// 		'iconPath': '/static/icon/home2.png',
				// 		'selectedIconPath': '/static/icon/home1.png'
				// 	},
				// 	2: {
				// 		'pagePath': '/pages/map/map',
				// 		'iconPath': '/static/icon/map02.png',
				// 		'selectedIconPath': '/static/icon/map01.png'
				// 	},
				// 	3: {
				// 		'pagePath': '/pages/msg/msg',
				// 		'iconPath': '/static/icon/msg02.png',
				// 		'selectedIconPath': '/static/icon/msg01.png'
				// 	},
				// 	4: {
				// 		'pagePath': '/pages/my/my',
				// 		'iconPath': '/static/icon/my02.png',
				// 		'selectedIconPath': '/static/icon/my01.png'
				// 	}
				// },
				list: [{
						'pagePath': '/pages/index/index',
						'iconPath': '/static/icon/home02.png',
						'selectedIconPath': '/static/icon/home01.png',
						'text': '首页'
					},
					{
						'pagePath': '/pages/map/map',
						'iconPath': '/static/icon/map02.png',
						'selectedIconPath': '/static/icon/map01.png',
						'text': 'IHG地图'
					},
					{
						'pagePath': '/pages/msg/msg',
						'iconPath': '/static/icon/msg02.png',
						'selectedIconPath': '/static/icon/msg01.png',
						'text': '消息'
					},
					{
						'pagePath': '/pages/my/my',
						'iconPath': '/static/icon/my02.png',
						'selectedIconPath': '/static/icon/my01.png',
						'text': '我的'
					}
				]
			}
		},
		computed: {
			...mapState({
				active: seate => seate.tab.index
			})
		},
		created() {
			this.calc()
			uni.hideTabBar()
			// this.getData()
		},
		mounted() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					let bottom = res.safeArea.bottom
					let height = res.safeArea.height
					let cacl = bottom - height
					_this.wagesheight = cacl
				}
			})
		},
		methods: {
			handleSwitch(index) {
				if (index === this.active) {
					return
				}
				this.$store.dispatch('tab/index', index)
				const item = this.list[index]
				uni.switchTab({
					url: item.pagePath
				})
			},
			calc() {
				let active = 1
				const page = uni.$u.page().replace('//', '/')
				this.list.forEach((obj, index) => {
					if (obj.pagePath === page) {
						active = index
					}
				})
				if (active !== this.active) {
					this.$store.dispatch('tab/index', active)
				}
			},
			// getData() {
			// 	this.$api.setting.tabBar().then(res => {
			// 		const data = res.data
			// 		data.forEach(obj => {
			// 			Object.assign(obj, this.types[obj.type])
			// 		})
			// 		console.log('-->data', data)
			// 		this.list = data
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		z-index: 999 !important;

		.content {
			background-color: #fff;
			box-shadow: 0px -2rpx 20rpx 0px rgba(0, 0, 0, 0.05);
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-size: 110% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			// padding-bottom: var(--padding-bottom);

			.tab-item {
				flex: 1;
				color: #CBC8C7;
				transition: .3s;
				font-size: 24rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&.active {
					color: #FF6200;
				}

				.icon {
					width: 42rpx;
					height: 42rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}
			}
		}
	}
</style>