NN2025081602/addons/min-exam/components/tabbar.vue

<template>
	<view id="tabbar">
		<uv-tabbar v-if="menuList.length>0" :value="index" @change="pageTo" activeColor="var(--color)">
			<uv-tabbar-item :badge="v.badge?v.badge:''" v-for="(v,k) in menuList" :key="k">
				<template v-slot:text>
					<uv-button :class="['uv-tabbar-item__text',index==k?'s':'not']" open-type="contact"
						v-if="v.code=='custom'"
						:customStyle="{border: 'none',padding: 0,height:'1rem', fontSize: '.75rem', color: (index==k?'var(--color)':'#7d7e80')}">
						{{v.name}}
					</uv-button>
					<view v-else :class="['uv-tabbar-item__text',index==k?'s':'not']">
						<span class="text">{{v.name}}</span>
					</view>
				</template>

				<template v-slot:inactive-icon>
					<uv-button open-type="contact" v-if="v.code=='custom'"
						:customStyle="{border: 'none',padding: 0,height:'2rem'}">
						<uv-image class="icon" :src="'/static/icons/'+v.icon+'.png'" width="32"
							mode="widthFix"></uv-image>
					</uv-button>
					<uv-image v-else class="icon" :src="'/static/icons/'+v.icon+'.png'" width="32"
						mode="widthFix"></uv-image>
				</template>
				<template v-slot:active-icon>
					<uv-button open-type="contact" v-if="v.code=='custom'"
						:customStyle="{border: 'none',padding: 0,height:'2rem'}">
						<uv-image class="icon" :src="'/static/icons/'+v.icon+'-active.png'" width="32"
							mode="widthFix"></uv-image>
					</uv-button>
					<uv-image v-else class="icon" :src="'/static/icons/'+v.icon+'-active.png'" width="32"
						mode="widthFix"></uv-image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>
<script>
	export default {
		name: "tabbar",
		props: {
			index: {
				type: [Boolean, Number],
				default: 0
			},
			menuType: {
				type: [Boolean, Number],
				default: 1
			},
		},
		data() {
			return {
				tab: this.index,
				menuList: [{
					name: '首页',
					code: 'home',
					icon: 'home',
					page: '/pages/index/index'
				}, {
					name: '在线咨询',
					code: 'custom',
					icon: 'custom',
				}, {
					name: '我的',
					code: 'mine',
					icon: 'mine',
					page: '/pages/mine/index'
				}]
			};
		},
		created() {

		},
		watch: {
			index(val) {
				this.tab = val
			}
		},
		methods: {
			onFeedTap() {
				let platform = uni.getSystemInfoSync().platform
				// #ifdef APP-PLUS
				if (platform == "ios") {
					let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
					let impact = new UIImpactFeedbackGenerator();
					impact.prepare();
					impact.init(1);
					impact.impactOccurred();
				}
				if (platform == "android") {
					uni.vibrateShort();
				}
				// #endif
			},
			pageTo(index) {
				let item = this.menuList[index]
				this.onFeedTap();
				console.log(item.page)
				if (item.code == 'custom') {
					return false;
				}

				// #ifdef H5
				if (item.page == '/pages/index/index' || item.page ==
					'/pages/mine/index') {
					uni.switchTab({
						url: item.page
					});
				} else {
					uni.navigateTo({
						url: item.page
					});
				}
				// #endif

				// #ifdef APP||APP-NVUE||APP-PLUS||APP-VUE||MP-WEIXIN||MP
				uni.switchTab({
					url: item.page
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	#tabbar {
		position: relative;
		z-index: 999;
		width: 100%;
		min-height: 100rpx;
		border-top: .05rem solid #f2f2f2;

		.icon {
			width: 32rpx;
			max-height: 36px;
		}

		::v-deep .uv-image__image {
			max-height: 36px;
		}


	}

	::v-deep .uv-tabbar {
		color: #7d7e80;

		.uv-tabbar-item__text {
			color: #7d7e80;
			margin-top: 2px;
			font-size: 12px;
		}
	}

	.uv-tabbar-item__text {
		color: #7d7e80;
		margin-top: .2rem;
		font-size: .75rem;

		&.s {
			color: var(--color);
		}
	}
</style>