微信小程序遮罩层悬浮窗踩坑

总结一下踩坑的几个点：

有遮罩层之后底层的页面还会触发滚动

遮罩层只在页面初始的地方有，如果滚动到下方就没有了

 如图，这样肯定是不符合需求的，先看一下这个不太符合需求的代码

 .wxml

<view class="father">
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="container" bindtap="open">
  Weixin
view>
<view class="box" wx:if="{{openBox}}">
  <view class="tankuang">
  <view class="text">弹框内容 view>
  <button bindtap="close">取消button>
  view>
view>
view>

.js

// index.js
Page({
 
  data:{
    openBox:false,
  },
//打开弹框
  open(){
    this.setData({
      openBox:true
    })
  },
//关闭弹框
  close(){
    this.setData({
      openBox:false
    })
  }
})

.wxss

/**index.wxss**/
/*整个遮罩层的样式*/
.box{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(1, 1, 1, .1);
}
/*弹框的样式*/
.tankuang{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-80%);
  background-color: #ededed;
  border-radius: 10px;
  width: 80%;
  height: 430rpx;
}
/*弹框文字的样式*/
.text{
  margin-top: 150rpx;
  text-align: center;
}
/*弹框按钮的样式*/
button{
  background-color: aqua;
  margin-top: 120rpx;
}

遮罩层只有一部门，不跟着列表滚动而滚动是因为用了绝对定位让他定位在了绝对位置。所以会被滑上去。而弹窗后如果不需要滚动的话需要给遮罩层这个大盒子加个 catchtouchmove="return"的属性。当我们还要滑动页面的时候就会出现这样的警告，在手机上显示的话就不能滑动了，用电脑的虚拟机是用鼠标的滚轮还是会滑动。

 现在是不会滚动了，但是如果我们在最后一个Weixin点击触发弹框，我们发现弹框和遮罩层都不见了。原来他还在上面。这个问题要如何解决？

 我们只需要将弹窗的绝对定位设置成固定定位。

.box{
  position:fixed';
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(1, 1, 1, .1);
}

这样不管我们在列表的那里点击弹框和遮罩层都会出现在整个页面

 这里直接使用的是，没有出现遮罩层颜色渐变的情况，如果是列表的话可能会出现遮罩层颜色渐变，这时候就需要给他在加一个z-index: 1;属性，注意这个1视情况而定。

最后一个问题是按钮的大小的问题

button{
  background-color: aqua;
  margin-top: 120rpx;
  width: 10000px;
}

我们给button设置宽，设置的这么离谱，但是我们看看页面的样式

 再设置一个小的width: 10px;

 

它雷打不动，后来发现这个宽度只能在行内设置

 <button bindtap="close" style="width: 50px;">取消button>