jigesi/components/tabBar/index.vue

<template>
	<view>
		<u-tabbar :value="name" :fixed="true" :placeholder="false" activeColor="#d81e06" :safeAreaInsetBottom="false"
			:activeColor="'#F85252'" :inactiveColor="'#BFBFBF'">
			<u-tabbar-item text="首页" name="Index" @click="goPage('Index')">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/index_a.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/index.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="分类" name="Cat" @click="goPage('Cat')">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/cat_a.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/cat.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="售后" name="Ser" @click="goPage('Ser')">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/service_a.png"
					style="width: 50rpx; height: 50rpx;"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/service.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
			</u-tabbar-item>
			<!-- <u-tabbar-item text="我的" name="Mine" @click="goPage('Mine')">
				<image class="u-page__item__slot-icon" slot="active-icon"
					:src="'/static/active-icon/wode@2x.png'  | getStaticUrl " style="width: 50rpx; height: 50rpx;">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					:src="'/static/icon/wode@2x.png' | getStaticUrl" style="width: 50rpx; height: 50rpx;">
				</image>
			</u-tabbar-item> -->
			<u-tabbar-item text="我的" name="My" @click="goPage('My')">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/my_a.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/my.png"
					style="width: 50rpx; height: 50rpx;">
				</image>
			</u-tabbar-item>

		</u-tabbar>
	</view>

</template>

<script>
	export default {
		props: {
			name: String
		},
		methods: {
			goPage(name) {
				this.$emit('changtab', name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>