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>

效果演示

相关推荐
weixin-a1530030831616 分钟前
vue疑难解答
前端·javascript·vue.js
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
2501_915921436 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友8 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全