前言：最近在项目中有这么一个需求，当点击页面中某一个元素时，调起弹窗显示相应的组件并且隐藏掉title栏，点击组件中的关闭图标时，弹窗销毁并显示相应的title栏。找了一下发现好多都不太对，于是记录下实现过程。

一.组件:

uniapp:自定义标题栏uni-nav-bar
uniapp:弹出层uni-popup
uniapp:关闭图标uni-icons

二.实现过程

1.pages.json

想实现自定义title栏的时候需要在,pages.json中将该页面原有的title栏目进行隐藏,代码如下:

"path": "medical/Medical",  //你的文件路径
"style": {"navigationStyle": "custom",  //这行代码"navigationBarTextStyle": "white","app-plus": {"titleNView": false}
}

2.父页面

所谓父页面也就是你需要调用弹出层的页面,代码如下:

<uni-nav-bar v-show="titleShow" dark :fixed="true" status-bar left-icon="arrowleft" backgroundColor="#3B71E8":border="false" color="#fff" title="确认支付" @clickLeft="back" />
....你的其他代码
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.7)" @change="maskClick"><cost></cost>  ---弹出显示的内容
</uni-popup>

其主要原理就是，当点击弹出层时候触发弹出层和的打开事假，据官方文档该事件为：this.$refs.popup.open('bottom')，其中bottom就是需要弹出的位置。
当触发打开事件时候，那么让自定义的title栏进行隐藏，所以我们在title栏中写入了v-show="titleShow"来进行显示隐藏的控制。
代码示例：

data(){return{titleShow: true,}
},
methods:{//触发弹出层打开View_Details() {this.$refs.popup.open('bottom')},back() {uni.navigateBack({delta: 1})},//进行title栏的控制maskClick() {if (this.titleShow) {this.titleShow = false} else {this.titleShow = true}}
}

3.子页面

子页面用到了uniapp的页面通讯api，当点击关闭图标时，进行页面通讯，在父页面进行事件处理，子页面代码如下所示：

<template><view class="cost_details"><uni-icons custom-prefix="custom-icon" type="close" size="30" @click="IconClick"></uni-icons></view>
</template><script>export default {data() {return {}},methods: {IconClick() {uni.$emit('Close', {msg: '关闭弹窗'})}}}
</script><style lang="scss" scoped>.cost_details {width: 100%;height: calc(100vh - 88rpx);background-color: #fff;border-radius: 40rpx 40rpx 0 0;}
</style>

4.通讯

在父页面我们可以使用uni.$on()来进行事件的监听，触发弹出层的关闭事件：

created() {uni.$on('Close', (data) => {console.log(data.msg)this.$refs.popup.close()})
},

uniapp自定义弹窗时去掉title栏相关推荐

小程序中使用fixed自定义弹窗时，底部长页面禁止滚动
原生小程序中可以在弹层上使用catchtouchmove,此事件会阻止向父元素冒泡,mpvue中使用@touchmove.stop="()=>{}".
跨平台应用开发进阶(七) ：uni-app 自定义 showToast
文章目录一.前言二.实现原理三.代码实现四.拓展阅读一.前言利用uni-app跨平台开发框架开发多终端APP时,应用HBuilder自身提供的弹窗不满足业务需求,故开发自定义弹窗组件sho ...
微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案
前言之前有个项目是运行在移动端Web,和微信H5中,由于默认的弹窗UI不太好看,而且还不统一,所以页面需要自定义弹窗,添加icon.提示信息.操作按扭等样式. 问题描述: 如果在页面内容的高度超过了 ...
wpf 自定义窗口，最大化时覆盖任务栏解决方案
原文:wpf 自定义窗口,最大化时覆盖任务栏解决方案相信很多人使用wpf时会选择自定义美观的窗口,因此会设置WindowStyle="None" 取消自带的标题栏.但这样使用 W ...
uniapp自定义导航栏，手机顶部通知栏字体颜色修改
使用uniapp自定义导航栏时,自己的导航栏字体颜色为白色但是,系统上方的通知栏部分还是黑色,文档中表明设置这个就有用,即使你的配置是"navigationStyle": &qu ...
uni-app 关于自定义标题栏时状态栏高度在不同手机的适配问题
前端小白的uni-app艰难学习之路解决在自定义标题栏时,虽然可以自由定义标题栏内容了,但我们通常又会面临着状态栏也一起塌陷的情况,在普通的手机上我们通过官方提供的css变量–status-bar ...
uniapp手写自定义弹窗
uniapp手写自定义弹窗弹窗这种东西真的是太常见了常见到烂大街但是每个平台的弹窗都不太一样样式不统一就不怎么好看像把代码编译到安卓端然后就- 哎不说了安卓离苹果的距离还是很远的这里只限 ...
uniapp自定义的tabbar切换页面时不加载onload、onshow问题
uniapp自定义的tabbar切换页面时不加载onload.onshow问题只需要在子组件里使用created()方法,把你的请求放在里面即可,如下
uni-app自定义导航栏右侧做增加按钮并跳转链接
uni-app自定义导航栏右侧做增加按钮并跳转链接 uni-app 在页面上的导航栏右侧做一个增加的图标并实现跳转 1. 先看效果图 2. 实现思路使用阿里图标库的字体图标, 下载放入本地文件 p ...

uniapp自定义弹窗时去掉title栏

目录: