uniapp uni-popup 底部弹窗案例

### UniApp 中 uni-popup 组件实现底部弹窗的案例与使用方法 在 UniApp 中，`uni-popup` 是一个常用的组件，用于实现各种类型的弹窗效果。对于底部弹窗的实现，可以通过设置 `type="bottom"` 来指定弹窗从屏幕底部弹出。以下是基于引用内容和相关知识整理的完整示例代码和说明。 #### 示例代码 以下是一个完整的底部弹窗示例代码，展示了如何结合 `uni-popup` 实现底部弹窗，并隐藏/显示底部导航栏的功能。 ```html <template> <view> <!-- 触发按钮 --> <button type="primary" @click="openPopup">打开底部弹窗</button> <!-- 底部弹窗 --> <uni-popup ref="popup" type="bottom" @change="onPopupChange"> <view class="popup-content"> <text>这是一个底部弹窗</text> <button type="warn" @click="closePopup">关闭弹窗</button> </view> </uni-popup> </view> </template> <script> export default { data() { return {}; }, methods: { // 打开弹窗 openPopup() { this.$refs.popup.open(); // 打开弹窗 uni.hideTabBar(); // 隐藏底部导航栏[^1] }, // 关闭弹窗 closePopup() { this.$refs.popup.close(); // 关闭弹窗 uni.showTabBar(); // 显示底部导航栏[^1] }, // 弹窗状态变化事件 onPopupChange(e) { if (!e.show) { uni.showTabBar(); // 如果弹窗关闭，则显示底部导航栏[^1] } } } }; </script> <style> .popup-content { padding: 20px; background-color: #fff; text-align: center; } </style> ``` #### 代码解析 1. **触发弹窗**：通过点击按钮调用 `openPopup` 方法，使用 `this.$refs.popup.open()` 打开弹窗，并调用 `uni.hideTabBar()` 隐藏底部导航栏。 2. **关闭弹窗**：通过点击关闭按钮调用 `closePopup` 方法，使用 `this.$refs.popup.close()` 关闭弹窗，并调用 `uni.showTabBar()` 显示底部导航栏[^1]。 3. **弹窗状态监听**：通过 `@change` 监听弹窗的状态变化，当弹窗关闭时自动显示底部导航栏[^1]。 #### 注意事项 - 在某些场景下，如果需要阻止页面滚动，可以参考引用[2]中的方法，通过 CSS 或 JavaScript 禁止遮盖层下的页面滑动[^2]。 - 如果弹窗中包含输入框且需要自定义键盘上推距离，可以参考引用[3]中的代码，通过设置 `adjustPosition=false` 和自定义样式来控制键盘行为[^3]。 - 对于底部弹窗存在空隙的问题，可以参考引用[4]中的解决方案，通过调整 `paddingBottom` 和其他样式属性解决兼容性问题[^4]。 --- ###