uni-popup 遮不住头部标题的解决办法
要做一个小程序,会有弹窗,但是uni-app的API组件uni.showModal不足以满足我的需求,于是我用HBuilderX引入了uni-popup。
代码是这样的
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="提示" @close="close" @confirm="confirm" :before-close="true">
<view>我是大魔王,你会苗喵叫</view>
</uni-popup-dialog>
</uni-popup>
在methods里面
open () {
this.$refs.popup.open()
},
close () {
this.$refs.popup.close()
},
confirm () {
this.$refs.popup.close()
},
弹框写好了,效果是这样的
头部标题和底部导航栏都没有遮住,因为uni-popup就是这样的
于是,我开始各种百度,各种尝试,最终,找到了一个不算办法的办法,但是,效果很完美
那就是修改头部标题和底部导航栏的背景颜色,选一个最接近遮罩层的颜色
open () {
this.$refs.popup.open()
// 修改头部标题背景颜色
uni.setNavigationBarColor({
//这里的颜色设置值能是十六进制这种 #999996,不支持其它类型
frontColor:"#000000",//字体颜色只能是黑或者白,#000000或者#FFFFFF,
backgroundColor:'##999996',//只改变这个背景颜色,不改变‘frontColor’字体颜色,背景色不会生效
}) },
close () {
this.$refs.popup.close()
// 关闭弹框时再设置回原来的颜色
uni.setNavigationBarColor({
frontColor:"#000000",
backgroundColor:'#f8f8f8',
})
},
confirm () {
this.$refs.popup.close()
uni.setNavigationBarColor({
frontColor:"#000000",
backgroundColor:'#f8f8f8', })
},
再看下效果
头部的标题看起来就像被遮住一样了。反正不是啥正规路子,不过我不强求,能实现效果就行。
uni-popup 遮不住头部标题的解决办法的更多相关文章
- sublime text3安装后html:5+Tab不能快速生成html头部信息的解决办法
sublime text3安装后html:5+Tab不能快速生成html头部信息的解决办法: 需要下载Emmet插件,按网上写的步骤按ctrl+shift+P打开命令面板,输入install,鼠标点击 ...
- vue----子组件引用vux popup mask遮罩在最上层解决办法 z-index问题
在一个页面的子组件中引用vux的popup组件时,出现mask遮罩在最上层的问题,百度了一下发现有两种解决办法,现提供第三种. popup在子组件引用时,vux将vux-popup-mask默认添加到 ...
- dedecms专题列表页不显示标题的解决办法
在网站专题中的标题都是比较长的,所以在调用title的时候没有使用title而是使用fulltitle的,fulltitle在其他的模型中都是可以正常使用的,也可以调用出字段,但是在专题中就没有调用出 ...
- Oracle高版本导出dmp导入Oracle低版本报错:"不是有效的导出文件、头部验证失败"解决方法
从Oracle高版本中导出dmp,然后导入到Oracle低版本时会报错:"不是有效的导出文件.头部验证失败",解决方法: 方法一:下载软件:AlxcTools,打开后选择要修改的文 ...
- sublime text 3文件标题无法显示中文的解决办法
前言 你是否遇也到了sublime文件标题无法显示中文的问题呢?如下列图片所示: 解决办法 1.点击菜单栏Preferences - > Settings. 打开下图: 2.在右边User内加入 ...
- vue-router 通过路由来实现切换头部标题
在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口.这时访问页面时头部标题不会变,该问题的解决方案如下: 通过采用组件内路由卫士(beforeRouterEnter.bef ...
- dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法
dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...
- word2010没有“标题2、标题3”样式的解决办法
word2010没有“标题2.标题3”样式的解决办法 很多人用word的时候都喜欢用“标题1”“标题2”等样式来定义他们的文档标题,被这样定义的标题会出现在导航窗格中,使浏览起来非常方便.但是最近我发 ...
- 网站title标题被改并被百度网址安全中心提醒的解决办法
国庆假日期间我们Sine安全接到众多网站站长求助网站标题被改导致在百度搜索中百度安全中心提醒被拦截,导致网站正常用户无法浏览网站被跳转到一些菠菜du博网站,而且很明显的一个特征就是在百度中搜索关键词的 ...
- LoadRunner打开WebTours只显示头部解决办法
LoadRunner打开WebTours只显示头部解决办法 1.遇到这种情况,先查看一下路径HP\LoadRunner\WebTours下的cgierr日志中是否有错误,比如Can't open ...
随机推荐
- Software--电商平台系统--P2 支撑基础设施 Infrastructure
2018-01-11 18:19:49 架构 客户体验 Ajax 交互技术. 网站快速加载且响应灵敏,则应该缓存商品数据. 灵活的缓存机制,以支持任何类型的存储(即分布式存储或内存中存储). 日志功 ...
- 第六章 mysql日志
第六章 mysql日志 一 错误日志 错误日志的默认存放路径是 mysql 存放数据的地方 hostname.err 1. 修改错误日志存放路径 [mysqld] log-error=/data/m ...
- elasticsearch+moloch
1.下载elasticsearch-6.8.7 https://www.elastic.co/cn/downloads/elasticsearch 2.下载moloch-2.2.2-1.x86_64 ...
- 部署单机版Redis
docker-compose.yml: version: '2' services: #redis容器 redis: #定义主机名 container_name: redis-single #使用的镜 ...
- cam对象类型
//此函数的功能是打印当前坐标系试图的所有坐标系名称 static void geom_list_name(tag_t group_tag) { //ask_member_list int count ...
- css如何实现(animation)跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android 系统完整的权限列表
访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.perm ...
- Dapper上传图片
<h2>添加商品</h2> <table class="table table-bordered"> <tr> <td> ...
- Hackintool查看CFG锁显示空白
Hackintool是黑苹果配置的得力工具,通过在Hackintool > 工具 > 从AppleIntelInfo中获取 可以看到cfg是否成功解锁.但是如果点击该按钮后输入密码执行CP ...
- 打包python文件为exe程序 vscode
一.项目下虚拟环境下载pyinstaller.exe 打包 1.检查是否下载 pyinstaller: 如果没有在vscode终端输入:pip3 install pyinstaller 安装成功后下 ...