小程序自定义无键弹窗组件————（2020.2.8学习笔记)

这次要实现的是无退出按钮无确定按钮的弹窗（如下图）

由于小程序自带的modal组件，和弹窗api都是默认有退出和确定按钮的，而且还是不能去掉的那种（惊了），所以又又又得自己动手定义一个弹窗组件才能实现效果了，只不过，在自定义弹窗组件之前，先要弄清楚，弹窗是什么？或者说，什么样的组件才能被称之为弹窗，根据我们之前，玩过，用过其他应用的经验，不难看出，大部分弹窗效果，都是用户在点击按钮，或者进入到某个页面之后，突然在页面上显示出一个或白色或其他颜色的方块，方块之外的区域都被灰色半透明的遮罩遮住，阻止了用户与方块之下的页面进行互动，然后方块上有字有图片之类的。所以，总结一下，能实现以上效果的组件，就是符合标准的弹窗。
那么，弄懂标准之后，直接按标准开工，首先，标准之一，“在页面之上”，这个好整，直接把样式里的z-index属性拉成999，这样可保证自定义组件，在Z轴上是高于页面的，然后，标准之二，“灰色半透明的遮罩遮住”，这个也好解决，直接将自定义组件中，最外层的view的背景颜色改成半透明灰色，另外，想改背景颜色，直接修改组件样式里的background-color属性即可，改完背景色，设置自定义组件占据全屏，这样遮罩就能覆盖这个页面了，最后，标准之三，“一个或白色或其他颜色的方块”，在实现完半透明灰色遮罩效果之后，设置包裹字和图片的view背景颜色为白色或者其他颜色就可完成。
接下来就是代码部分
自定义组件wxml文件中的代码

<!--My_Comment/My_Astrological_Modal/My_Astrological_Modal.wxml-->
<view class="Modal_Mask">
  <view class="Modal_Content">
  <text>请选择星座</text>
  </view>

</view>

自定组件wxss文件中的代码

/* My_Comment/My_Astrological_Modal/My_Astrological_Modal.wxss */
.Modal_Mask{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.Modal_Content{
   display: flex;
   flex-direction: column;
   width: 80%;
   height: 500rpx;
   background-color: #fff;
   border-radius: 10rpx;
   padding: 20rpx;
   text-align: center;
}

然后在要引用该自定义组件页面的json文件文件上声明引用（代码如下)

{
  "usingComponents": {
 "My_Astrological_Modal":"/My_Comment/My_Astrological_Modal/My_Astrological_Modal"
  }
}

最后在该页面的wxss中使用该组件

<My_Astrological_Modal />

这样，自定义无键弹窗组件的构建和使用就都已经完成了