uniapp点击按钮uni-popup 在页面底部弹出，在uni-popup 写自己需要的业务，且覆盖在底部tabber上面

### 实现 UniApp 中 uni-popup 底部弹出自定义业务内容并覆盖底部 TabBar 的方法 在 UniApp 中实现点击按钮后通过 `uni-popup` 在页面底部弹出并覆盖底部 TabBar 的效果，可以通过以下方式完成。此实现结合了逻辑代码和配置文件的调整。 #### 1. 页面逻辑代码 在 Vue 组件中使用 `uni-popup` 并绑定相关事件以控制弹窗的显示与隐藏。以下是完整的逻辑代码： ```javascript <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> <!-- 按钮触发弹出 --> <button @click="openPopup">打开底部弹出框</button> <!-- 弹出层组件 --> <uni-popup ref="popupRef" type="bottom"> <view class="custom-content"> <block v-for="(item, index) in menuItems" :key="index"> <view class="menu-item"> <image :src="item.icon" mode="aspectFit"></image> <text>{{ item.text }}</text> </view> </block> </view> </uni-popup> </view> </template> <style scoped> .custom-content { background-color: #fff; padding: 20px; } .menu-item { display: flex; align-items: center; margin-bottom: 10px; } .menu-item image { width: 30px; height: 30px; margin-right: 10px; } </style> ``` 以上代码实现了点击按钮后弹出底部 `uni-popup`，并隐藏底部 TabBar 的功能[^1]。 #### 2. 配置 pages.json 文件 为了确保弹出层能够正确覆盖原生 TabBar 和导航栏，需要对 `pages.json` 进行适当配置。以下是示例配置： ```json { "pages": [ { "path": "pages/index/index", "style": { "app-plus": { "scrollIndicator": "none", "bounce": "none", "safearea": { "bottom": { "offset": "none" } }, "subNVues": [ { "id": "fullpopup", "path": "pages/components/full-popup/full-popup", "type": "popup", // 设置类型为弹窗 "style": { "position": "popup", // 定位为弹窗 "background": "rgba(0,0,0,0.1)" // 设置背景色 } } ] } } } ] } ``` 通过上述配置，可以确保弹出层不会被原生 TabBar 或导航栏遮挡[^2]。 #### 3. Webview 样式调整 如果需要进一步调整 Webview 的侧滑返回效果，可以通过 `WebviewStyle` 的 `popGesture` 属性进行设置。例如，禁用侧滑返回功能以避免干扰弹出层操作： ```json "webviewStyle": { "popGesture": "none" // 禁用侧滑返回功能 } ``` 此配置可防止用户在弹出层显示时通过侧滑关闭页面[^3]。 --- ###