uni-app新建透明页面实现全局弹窗

需求背景

实现一个能遮住原生 tabbarnavbar 的全局操作框

原理

使用一个透明的页面来模拟弹窗,这个页面可以遮住原生 tabbarnavbar

页面配置

json 复制代码
{
    "path" : "pages/shootAtWill/shootAtWill",
    "style" : 
    {
        "navigationBarTitleText" : "随手拍",
        "navigationStyle": "custom",
        "backgroundColor": "transparent",
        "app-plus": {
            "animationType": "slide-in-bottom", // 我这边需求是从底部弹出
            "background": "transparent",
            "popGesture": "none",
            "bounce": "none",
            "titleNView": false,
            "animationDuration": 150
        }
    }
}

页面样式

html 复制代码
<style>
	page {
		/* 必须的样式,这是页面背景色为透明色 */
		background: transparent; 
	}
</style>
<style lang="scss" scoped>
  // 写你页面的其他样式
</style>

这样的话就新建成功了一个透明的页面,那么这个页面上的东西都可以遮挡住原生 tabbarnavbar

我还加了遮罩:

html 复制代码
<template>
  <view>
    <view class="modal" style="z-index: -1"></view>  
    
  </view>
</template>

<style lang="scss" scoped>
   .modal {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
	}
</style>

效果演示

相关推荐
!执行23 分钟前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安27 分钟前
跟着 AI 学(二)- Quill 接入速通
前端
十里-39 分钟前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada44 分钟前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚1 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
星光一影1 小时前
供应链进销存源码uniapp全开源ERP多仓库管理系统pc+app手机端
mysql·elementui·uni-app·开源·php·phpstorm·1024程序员节
黑云压城After1 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好11 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
A腿长一米二1 小时前
【uniapp问题还是我的认知问题】
uni-app
dwedwswd1 小时前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot