今天我在做一个点击某个按钮显示弹框的时候,发现弹框自带的蒙层盖完整个页面了,但是被盖住的内容还是可以上下滑动,这个效果并不是我想要的,经过我多次研究并百度之后,我终于可以解决这个问题了,下面我来说一下如何实现的:
注意点:这个效果在编辑器(电脑)上面是看不出效果的,需要用手机上看才能看出效果
1、弹框里面没有滚动条的情况:
直接在弹框蒙层最外层加上catchtouchmove="{{true}}"
,或者定义catchtouchmove="catchTouch"
方法,在方法中直接为空即可,使用例子如下:
<!-- <view class="tipsss" catchtap="inow" data-id="1" wx:if="{{status}}" catchtouchmove="{{true}}"> -->
<view class="tipsss" catchtap="inow" data-id="1" wx:if="{{status}}" catchtouchmove="catchTouch">
<view class="tips" catchtap="inow" data-id="2">
<text class="title">欢迎</text>
<view class="tips-body">
<view class="item">
<text>我的CSDN地址:</text>
<text class="phone adr" bindtap='copyText' data-text="{{contents}}">https://blog.csdn.net/LiaoFengJi</text>
</view>
</view>
</view>
</view>
data(){
status:false
}
// 解决遮罩层的滚动穿透问题
catchTouch(){},
// 点击遮罩层关闭弹框
inow(e) {
console.log(111111, e.currentTarget.dataset.id)
let id = e.currentTarget.dataset.id;
if (id == 1) {
this.setData({
status: false
})
}
console.log('this.data.status--->', this.data.status)
},
// 控制弹框的显示与否
concatNew() {
console.log('this.data.status-11-->', this.data.status)
this.setData({
status: !this.data.status
})
},
针对catchtouchmove方法,原生小程序使用catchtouchmove=“catchTouch”,mpvue中使用@touchmove.stop=“catchTouch”,注意要给个空方法,否则会报警告
2、弹框里面有滚动条的情况:
这里我还没想出更好的解决方案,先说一个复杂的方案吧,就是两个子标签同时根据page父标签进行固定定位。代码如下:
(1)xml文件:
<view class="tips-icon" bindtap="concatNew">
<image src="../../images/home.png"></image>
</view>
<view class="tipsss" wx:if="{{status}}" catchtouchmove="{{true}}" catchtap="inow" data-id="1"></view>
<view class="tips" catchtap="inow" data-id="2" wx:if="{{status}}">
<text class="title">欢迎</text>
<view class="tips-body">
<view class="text">
<text>121211</text>
<text>1212112</text>
<text>1212113</text>
<text>1212114</text>
<text>1212115</text>
<text>1212116</text>
<text>1212117</text>
<text>1212118</text>
<text>1212119</text>
<text>12121110</text>
<text>12121111</text>
</view>
</view>
</view>
(2)wss文件
.tips-icon {
position: fixed;
right: 0;
bottom: 100rpx;
width: 105rpx;
height: 100rpx;
}
.tips-icon image {
width: 100%;
height: 100%;
}
/* 弹框开始 */
.tipsss {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.tips {
width: 560rpx;
background-color: #fff;
position: fixed;
top: 300rpx;
left: 95rpx;
}
.tips .title {
line-height: 60rpx;
text-align: center;
font-weight: bold;
display: block;
border-bottom: 1rpx solid #8c9bae;
}
.tips-body {
height: 320rpx;
overflow: scroll;
}
.tips-body .text text {
display: block;
text-align: center;
line-height: 90rpx;
}
/* 弹框结束 */