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

总结一下踩坑的几个点：

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

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

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

.wxml

<!--index.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);
}

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

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

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

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

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

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

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

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

微信小程序遮罩层悬浮窗踩坑相关推荐

# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
解决微信小程序遮罩层下方内容滚动问题
在遮罩层添加下面代码,阻止冒泡 capture-catch:touchmove="preventdefault"
微信小程序--多视频滑动播放(踩坑,填坑)
最近在做一个关于短视频的小程序,类似于微视和快手的小程序,但是在做的过程当中碰到了好多坑,于是得一步一步的去填这个坑.先来看看最后的实现效果在做的过程中,想要实现多个视频无限滑动播放,并且在视频原生 ...
微信小程序实现多视频-video踩坑之路
经过一周对多视频上下滑动播放的摸索,终于得到了可观的成绩,接下来先讲一下我的摸索之路. 介绍:video这个层级非常高,如果要在video上面放一些视频介绍必须要用到cover-view,而cover ...
小程序遮罩层（阻止事件穿透）
小程序遮罩层(阻止事件穿透) 若弹出层没有滚动事件直接在蒙板上加catchtouchmove="preventTouchMove" 即可 <view class=&quo ...
微信小程序渲染层错误：可以在AppData中获取到值但无法渲染到页面
微信小程序渲染层错误:可以在AppData中获取到值但无法渲染到页面 1.遇到的问题: 2.解释: 3.附上正确的完整代码: 在我跟着视频(bili:BV1nE41117BQ)P78 学做小程序的过程 ...
微信小程序开发经验总结（遇到的坑和问题汇总）
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言: 前段时间公司打 ...

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

微信小程序遮罩层悬浮窗踩坑相关推荐

最新文章

热门文章