uniapp如何使用uv-popup彈出框隱藏底部導(dǎo)航tabbar
更新時(shí)間：2025年02月07日 11:07:42 作者：會發(fā)光的豬。
文章介紹了如何在uniapp中使用uv-popup組件隱藏底部導(dǎo)航的tabbar,并提供了隱藏前和隱藏后的代碼示例,感興趣的朋友一起看看吧
uniapp中使用uv-popup 彈出框隱藏底部導(dǎo)航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;"> 請登錄后查看完整內(nèi)容。 </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';
// 點(diǎn)擊登錄，彈出底部彈出框
// 定義彈出層的引用
const popupRef = ref(null);
// 點(diǎn)擊登錄時(shí)調(diào)用的方法
function openPopup() {
// 打開彈出層
popupRef.value.open();
// 隱藏底部導(dǎo)航
uni.hideTabBar();
}
// 關(guān)閉彈出層時(shí)顯示底部導(dǎo)航欄
function closePopup() {
// 關(guān)閉彈出層
popupRef.value.close();
// 顯示底部導(dǎo)航
uni.showTabBar();
}
const menuItems = ref([
{ icon: '/static/my/one.png', text: '個(gè)人信息' },
{ 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> -->
<!-- 圖標(biāo) -->
<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;">
請登錄后查看完整內(nèi)容。
</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';
// 點(diǎn)擊登錄，彈出底部彈出框
// 定義彈出層的引用
const popupRef = ref(null);
// 點(diǎn)擊登錄時(shí)調(diào)用的方法
function openPopup() {
// 打開彈出層
popupRef.value.open();
// 隱藏底部導(dǎo)航
uni.hideTabBar();
}
// 關(guān)閉彈出層時(shí)顯示底部導(dǎo)航欄
function closePopup() {
// 關(guān)閉彈出層
popupRef.value.close();
// 顯示底部導(dǎo)航
uni.showTabBar();
}
const menuItems = ref([
{ icon: '/static/my/one.png', text: '個(gè)人信息' },
{ 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;
/* 覆蓋整個(gè)元素區(qū)域，線性漸變自動(dòng) */
background-position: center, center;
/* 兩個(gè)背景都居中 */
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>到此這篇關(guān)于uniapp使用uv-popup彈出框隱藏底部導(dǎo)航tabbar方法的文章就介紹到這了,更多相關(guān)uniapp隱藏底部導(dǎo)航tabbar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了讓JavaScript代碼更加精簡的方法技巧,文章通過使用?JavaScript對象解構(gòu)來節(jié)省代碼，JavaScript?對象解構(gòu)賦值在項(xiàng)目開發(fā)中是一個(gè)常用的技能。下文實(shí)現(xiàn)過程需要的小伙伴可以參考一下2022-06-06
值得分享的JavaScript實(shí)現(xiàn)圖片輪播組件
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片輪播組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
js實(shí)現(xiàn)仿愛微網(wǎng)兩級導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)仿愛微網(wǎng)兩級導(dǎo)航菜單效果代碼,通過javascript自定義函數(shù)結(jié)合鼠標(biāo)點(diǎn)擊事件實(shí)現(xiàn)tab切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JS實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼
這篇文章主要為大家介紹了如何使用JavaScript實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼下載到本地，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流component綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流component綁定的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
微信小程序用戶登錄和登錄態(tài)維護(hù)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序用戶登錄和登錄態(tài)維護(hù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了js 如何獲取input點(diǎn)選按鈕的值,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序switch開關(guān)選擇器的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript中的數(shù)據(jù)劫持和數(shù)據(jù)代理使用
文章主要介紹了數(shù)據(jù)劫持（Object.defineProperty）和數(shù)據(jù)代理（Proxy）兩種方式在JavaScript中的應(yīng)用,并通過生活中的例子來詳細(xì)解釋它們的工作原理和使用場景,文章還對比了兩種方式的優(yōu)缺點(diǎn),并指出了它們在Vue.js中的應(yīng)用2025-02-02