mp-ui-user/components/custom-tab-bar/custom-tab-bar.vue

<template>
	<view>
		<u-tabbar :value="activeValue" @change="changeTabbar" zIndex="999" :fixed="true" activeColor="#E96737" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item :text="item.text" :name="item.name" v-for="(item, index) in list" :key="index">
				<image class="icon" slot="active-icon" :src="item.selectedIconPath"></image>
				<image class="icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "custom-tab-bar",
		props: {
			activeValue: {
				type: [Number, String],
				default: 'index'
			},
		},
		data() {
			return {
				list: []
			};
		},
		mounted() {
			this.tabList()
		},
		methods: {
			changeTabbar(e) {
				if (e == 'index') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (e == 'core') {
					uni.switchTab({
						url: '/pages/core/index'
					})
				} else if (e == 'activity') {
					uni.switchTab({
						url: '/pages/activity/index'
					})
				} else if (e == 'user') {
					uni.switchTab({
						url: '/pages/user/index'
					})
				}
			},
			tabList() {
				this.list = [{
						name: "index",
						iconPath: "../../static/tabbar/index.png",
						selectedIconPath: "../../static/tabbar/index_select.png",
						text: "刮奖"
					},
					{
						name: "core",
						iconPath: "../../static/tabbar/core.png",
						selectedIconPath: "../../static/tabbar/core_select.png",
						text: "兑换大厅"
					},
					{
						name: "activity",
						iconPath: "../../static/tabbar/core.png",
						selectedIconPath: "../../static/tabbar/core_select.png",
						text: "免费抽奖"
					},
					{
						name: "user",
						iconPath: "../../static/tabbar/user.png",
						selectedIconPath: "../../static/tabbar/user_select.png",
						text: "我的"
					}
				]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		width: 45rpx;
		height: 45rpx;
	}
</style>