talk_appAmin/pages/Friend/messageswitching.vue

<template>
	<view class="content">

		<view @click="ToReutn()" class="viewimage">
			<image src="../../static/images/sign/return.png" />
		</view>

		<view class="content_title">
			<!-- <u-tabs :lineWidth="25" :lineHeight="2" itemStyle="padding:11px;" lineColor="#B3D7FF" :list="list1"
				@change="tabChange"></u-tabs> -->

			<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4" :scrollable="false"
				:activeStyle="{ fontWeight: '600',fontSize:'40rpx',color: '#000000'}"
				:inactiveStyle="{fontWeight: '400',fontSize:'36rpx',color: '#999999'}" :list="list1"
				@change="tabChange"></u-tabs>
		</view>


	</view>


	<view style="margin-top: 30rpx;">
		<view v-if="NewIndex === 1">
			<view
				style="position: fixed; top: 0;bottom: 1122rpx; left: 0; right: 0;background: linear-gradient(0deg, #ffffff, #c9f6f5); z-index: -1;">
			</view>
			<messagenotificationVue></messagenotificationVue>
		</view>

		<view v-if="NewIndex === 0">
			<addressbookVue></addressbookVue>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";


	const {
		proxy
	} = getCurrentInstance();



	import messagenotificationVue from "./messagenotification.vue";
	import addressbookVue from "./addressbook.vue";
	const list1 = reactive([{
			name: '通讯录'
		},
		{
			name: '消息'
		}
	])


	const NewIndex = ref(0);

	function tabChange(index) {
		console.log('当前选中的选项卡索引：', index);
		NewIndex.value = index.index;
	}

	function ToReutn() {
		// proxy.$tab.navigateTo(1)
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style scoped>
	.u-tabs__wrapper__nav__line[data-v-0de61367] {
		position: absolute !important;
		bottom: 0rpx !important;
	}

	image {
		width: 31rpx;
		height: 44rpx;
	}

	.viewimage {
		/* margin-left: 24rpx; */
		vertical-align: middle;
		display: block;
		margin-left: 32rpx;
		line-height: 88rpx;
		padding-top: 20rpx;
	}
	.content {
		/* margin-top: 110rpx; */
		/* 		position: fixed; */
		display: flex;
		margin-right: 32rpx;
		width: 750rpx;
		height: 88rpx;
	}

	.content_title {
		margin: auto;
		display: inline-block;
		vertical-align: middle;
		margin-left: 186rpx;
	}
</style>