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

目录:

  • ​​一.组件:​​
  • ​​二.实现过程​​
  • ​​1.pages.json​​
  • ​​2.父页面​​
  • ​​3.子页面​​
  • ​​4.通讯​​

一.组件:

  1. uniapp:自定义标题栏​​uni-nav-bar​​
  2. uniapp:弹出层​​uni-popup​​
  3. 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()
  })
},