huarun/components/tabbar/tabbar.vue

<template>
	<navBar :title='title' iconForce="false" ref="navbar">
	</navBar>
	<water/>
	<view>
		<template v-if="index==1">
			<home />
		</template>

		<template v-if="index==2">
		</template>

		<template v-if="index==3">
			<my />
		</template>
		<up-tabbar :value="index" :placeholder="false" @change="change">
			<up-tabbar-item text="首页" name='1'>
				<template #active-icon>
					<image style="width: 41rpx;height: 43rpx;" src="@/static/home1.png">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 41rpx;height: 43rpx;" src="@/static/home2.png"></image>
				</template>
			</up-tabbar-item>

			<up-tabbar-item text="消息" name='2' :badge="unread>0?unread:false">
				<template #active-icon>
					<image style="width: 41rpx;height: 43rpx;" src="@/static/new1.png">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 41rpx;height: 43rpx;" src="@/static/new2.png"></image>
				</template>
			</up-tabbar-item>

			<up-tabbar-item text="我的" name='3'>
				<template #active-icon>
					<image style="width: 41rpx;height: 43rpx;" src="@/static/my1.png">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 41rpx;height: 43rpx;" src="@/static/my2.png"></image>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script setup>
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import login from '../../api/model/login';

	const {
		proxy
	} = getCurrentInstance()

	import home from '@/pages/home/home.vue';
	import my from '@/pages/my/my.vue'
	const index = ref('1')
	const title = ref('首页')
	const navbar = ref()
	const unread = ref(0)

	const updateUnread = (e) => {
		unread.value = e
	}

	const change = (e) => {
		index.value = e
		switch (e) {
			case '1':
				title.value = '首页'
				navbar.value.changeTitle('首页')
				break
			case '2':
				title.value = '消息'
				navbar.value.changeTitle('消息')
				break
			case '3':
				title.value = '我的'
				navbar.value.changeTitle('我的')
				break
		}
	}



	onShow(() => {
	});

	onLoad((e) => {
		if (e && e.index == '2') {
			index.value = '2'
		}
	});

	onMounted(() => {
		if (index.value == '2') {
			change('2')
		}

	})


</script>

<style lang="scss" scoped>
	::v-deep.uni-section__content-title {
		font-weight: bold;
	}

	::v-deep.uni-section {
		width: 97%;
		margin: 20rpx auto;
		background-color: transparent;
		// position: absolute;
		// top: 310rpx;
		z-index: -1;
		// position: relative;

	}
</style>