当前位置：首页 > article >正文

uniapp使用uv-popup弹出框隐藏底部导航tabbar方法

article 2025/2/7 20:29:32

uniapp中使用uv-popup 弹出框隐藏底部导航tabbar

弹出层代码：

<text class="userlogin" @click="openPopup">请登录></text>

<!-- 弹出层 -->
		<uv-popup ref="popupRef" mode="bottom" border-radius="10px 10px 0 0" background-color="#fff" zIndex="99"
			safeAreaInsetBottom="true">
			<view style="width: 600rpx; padding: 30rpx;">
				<text style="font-size: 32rpx; font-weight: bold;">登录提示</text>
				<text style="font-size: 28rpx; color: #666; margin-top: 20rpx; display: block;">
					请登录后查看完整内容。
				</text>
				<button style="background-color: #007AFF; color: #FFFFFF; padding: 20rpx; margin-top: 30rpx;">
					去登录
				</button>
			</view>
		</uv-popup>

逻辑代码：

<script lang="ts" setup>
	import { ref } from 'vue';

	// 点击登录，弹出底部弹出框

	// 定义弹出层的引用
	const popupRef = ref(null);

	// 点击登录时调用的方法
	function openPopup() {
		// 打开弹出层
		popupRef.value.open();
		// 隐藏底部导航
		uni.hideTabBar();
	}

	// 关闭弹出层时显示底部导航栏
	function closePopup() {
		// 关闭弹出层
		popupRef.value.close();
		// 显示底部导航
		uni.showTabBar();
	}


	const menuItems = ref([
		{ icon: '/static/my/one.png', text: '个人信息' },
		{ icon: '/static/my/two.png', text: '浏览历史' },
		{ icon: '/static/my/three.png', text: '我的收藏' },
		{ icon: '/static/my/four.png', text: '退出登录' }
	]);
</script>

隐藏前：

隐藏后：

全部代码:

<template>
	<view class="page">
		<!-- <view class="header">

			<view class="header-icons">
				<uni-icons custom-prefix="iconfont" type="scan" size="24" color="#FFFFFF"></uni-icons>
				<uni-icons custom-prefix="iconfont" type="settings" size="24" color="#FFFFFF"></uni-icons>
			</view>
		</view> -->

		<view class="user-info">
			<!-- 			<image class="avatar" src="https://ai-public.mastergo.com/ai/img_res/1bd351b304f6817824d478be18fa92b4.jpg"
				mode="aspectFill"></image> -->
			<text class="my">我的</text>
			<image class="avatar" src="/static/my/mr.png" mode="aspectFill"></image>
			<!-- <text class="username">用户DGF123</text> -->
			<text class="userlogin" @click="openPopup">请登录></text>
		</view>

		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index">
				<!-- 		<uni-icons :type="item.icon" size="24" color="#007AFF"></uni-icons> -->
				<!-- 图标 -->
				<image class="menu-icon" :src="item.icon" mode=""></image>
				<!-- 文字 -->
				<text class="menu-text">{
  
  { item.text }}</text>
				<uv-icon name="arrow-right" color="#6D6D6D" size="14"></uv-icon>
			</view>
		</view>
		<!-- 弹出层 -->
		<uv-popup ref="popupRef" mode="bottom" border-radius="10px 10px 0 0" background-color="#fff" zIndex="99"
			safeAreaInsetBottom="true">
			<view style="width: 600rpx; padding: 30rpx;">
				<text style="font-size: 32rpx; font-weight: bold;">登录提示</text>
				<text style="font-size: 28rpx; color: #666; margin-top: 20rpx; display: block;">
					请登录后查看完整内容。
				</text>
				<button style="background-color: #007AFF; color: #FFFFFF; padding: 20rpx; margin-top: 30rpx;">
					去登录
				</button>
				<view style="text-align: right; margin-top: 20rpx;">
					<uv-icon name="close" color="#6D6D6D" size="40" @click="closePopup"></uv-icon>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	// 点击登录，弹出底部弹出框

	// 定义弹出层的引用
	const popupRef = ref(null);

	// 点击登录时调用的方法
	function openPopup() {
		// 打开弹出层
		popupRef.value.open();
		// 隐藏底部导航
		uni.hideTabBar();
	}

	// 关闭弹出层时显示底部导航栏
	function closePopup() {
		// 关闭弹出层
		popupRef.value.close();
		// 显示底部导航
		uni.showTabBar();
	}


	const menuItems = ref([
		{ icon: '/static/my/one.png', text: '个人信息' },
		{ icon: '/static/my/two.png', text: '浏览历史' },
		{ icon: '/static/my/three.png', text: '我的收藏' },
		{ icon: '/static/my/four.png', text: '退出登录' }
	]);
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #F6F6F6;
	}

	.page {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.header {
		background-color: #007AFF;
		padding: 44rpx 32rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}

	.header-icons {
		display: flex;
		gap: 20rpx;
	}

	/* 	.user-info {
		background: linear-gradient(180deg, #007AFF 0%, #3A98FF 100%);
		padding: 40rpx 0 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	} */
	.user-info {
		background-image: linear-gradient(180deg, #007AFF 0%, rgb(203, 226, 254) 100%);
		background-size: cover, auto;
		height: 560rpx;
		/* 覆盖整个元素区域，线性渐变自动 */
		background-position: center, center;
		/* 两个背景都居中 */
		padding: 40rpx 0 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.my {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 80rpx;
		margin-top: 26rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-bottom: 20rpx;
	}

	.username {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
	}

	.userlogin {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		font-weight: 500;
		padding: 20rpx 34rpx;
		background: #2D8BFF;
		border-radius: 430rpx 430rpx 430rpx 430rpx;
	}

	.menu-list {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: -200rpx 32rpx 0;
		padding: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.menu-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		padding: 16rpx 0;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		margin-top: auto;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-text {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.active-text {
		color: #007AFF;
	}
</style>

查看全文

http://www.kler.cn/a/535503.html