tab-bar.vue

<template>
	<view class="cu-bar tabbar bg-white shadow foot">
		<view class="action" @click="NavChange" data-tab="warehousing">
			<view class="cuIcon-cu-image"><text class="cuIcon-scan" :class="getActiveClass('warehousing')"></text></view>
			<view :class="getActiveClass('warehousing')">入仓</view>
		</view>
		<view class="action" @click="NavChange" data-tab="loading">
			<view class="cuIcon-cu-image"><text class="cuIcon-deliver" :class="getActiveClass('loading')"></text></view>
			<view :class="getActiveClass('loading')">装柜</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tab-bar',
	props: ['currentPage'],
	data() {
		return {
			url: {
				warehousing: '/pages/warehousing/list',
				loading: '/pages/loading/list'
			}
		};
	},
	computed: {
		getActiveClass() {
			return function(tab) {
				return this.currentPage == tab ? 'text-blue' : 'text-gray';
			};
		}
	},
	methods: {
		NavChange: function(e) {
			const url = this.url[e.currentTarget.dataset.tab];
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style></style>