小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序的自定义的,遮罩层会出现滚动穿透的问题,即遮罩层下面的页面依旧可以滚动,这个问题有解决办法吗?
13 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
是哪个组件?
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
如果弹出层没有滚动事件,就直接在蒙板上加catchtouchmove="move" move:function(){};
如果弹出层有滚动事件,那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。
<view class="{{showSearchView?'tripList_root':''}}">
.tripList_root{
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
3. 亲测有效。
也可以直接用catchtouchmove="{{true}}"
position
:
relative
;
z-index
0
建议用这两行,fixed会导致布局滚动到顶部
使用page-meta组件设置 overflow: hidden即可解决
可以这样来解决,
参照:https://blog.csdn.net/WEIGUO19951107/article/details/106970582
// 重点A:阻止事件冒泡 handleTouchMove = (e) => { e.stopPropagation() } render() { return ( <View className='rootClass' onTouchMove={this.handleTouchMove}> <!-- 遮罩层 --> <View onClick={this.close} className='at-float-layout__overlay' /> <View className='at-float-layout__container layout'> <View className='layout-body'> <!-- 重点B: ScrollView(开启scrollY)--> <ScrollView scrollY scrollX={false} className='layout-body__content' > {this.props.children} </ScrollView> </View> </View> </View> ) }
把catchtouchmove="stopTouch" 放在 包裹遮罩与对话框的 view中,在js添加stopTouch(){} 方法。在开发工具中测试无效。在真机中测试可行
现在有方案解决现在
detail.json 文件中 添加禁止 弹性
当弹层时候 把scroll-view的竖向滚动禁用,不让滚动,关闭弹层后再打开
这样弹层后 背景是完全不动的也没有他弹性,就不会出现背景层跟着动了
上面的方法有缺点:
当页面注册有onPullDownRefresh事件时会触发该事件;
当页面滚动一定距离时,显示遮罩时页面会回到顶部;
我也遇到同样的问题,但是我看美团的小程序做出来了这个效果,不知道他们怎么做的
一楼说的思路对。
如果弹出层也有滚动,完美的方案是先把背景层设置成fixed高度100%,然后遮罩出现修改背景层的overflow:hidden,遮罩消失修改overflow-y:scroll,大致就是这个思路,亲测,就算修改后也不会导致背景层归顶,完美。
<template name="timeSelect">
<view wx:if="{{id}}" class="stop_bg_scroll" catchtouchmove="preventTouchMove">
<form bindsubmit="bindsubmit" id='{{id}}'>
<!-- 半透明遮挡层 -->
<view class="dialog-mask" bindtap="bindtap" id="mask" style="display:block;"></view>
<view class='time-time'>
<!-- 标题 -->
<view indicator-style="height: 50px;" class="time-title">{{title}}{{yyyy}}-{{MM}}-{{dd}} {{HH}}:{{mm}}:{{ss}}
</view>
<!-- 时间滚动条 -->
<picker-view id="{{id}}" indicator-style="height: 50px;" class='time-content' value="{{value}}" bindchange="bindchange"name="index">
<picker-view-column>
<view wx:for="{{yyyys}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<view wx:for="{{MMs}}" style="line-height: 50px">{{item}}月</view>
<view wx:for="{{dds}}" style="line-height: 50px">{{item}}日</view>
<view class="time-footer">
<button class="time-cancel" formType='submit' id="cancel" data-status="cancel">取消</button>
<button class="time-confirm" formType='submit' id="confirm" data-status="confirm">确定</button>
</form>
</template>
wxss:
.stop_bg_scroll{
top: 0px;
希望有用
那么下拉刷新还有效么?
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
是哪个组件?
如果弹出层没有滚动事件,就直接在蒙板上加catchtouchmove="move" move:function(){};
如果弹出层有滚动事件,那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。
<view class="{{showSearchView?'tripList_root':''}}">
.tripList_root{
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
3. 亲测有效。
也可以直接用catchtouchmove="{{true}}"
position
:
relative
;
z-index
:
0
;
建议用这两行,fixed会导致布局滚动到顶部
使用page-meta组件设置 overflow: hidden即可解决
可以这样来解决,
参照:https://blog.csdn.net/WEIGUO19951107/article/details/106970582
// 重点A:阻止事件冒泡 handleTouchMove = (e) => { e.stopPropagation() } render() { return ( <View className='rootClass' onTouchMove={this.handleTouchMove}> <!-- 遮罩层 --> <View onClick={this.close} className='at-float-layout__overlay' /> <View className='at-float-layout__container layout'> <View className='layout-body'> <!-- 重点B: ScrollView(开启scrollY)--> <ScrollView scrollY scrollX={false} className='layout-body__content' > {this.props.children} </ScrollView> </View> </View> </View> ) }
把catchtouchmove="stopTouch" 放在 包裹遮罩与对话框的 view中,在js添加stopTouch(){} 方法。在开发工具中测试无效。在真机中测试可行
现在有方案解决现在
detail.json 文件中 添加禁止 弹性
当弹层时候 把scroll-view的竖向滚动禁用,不让滚动,关闭弹层后再打开
这样弹层后 背景是完全不动的也没有他弹性,就不会出现背景层跟着动了
上面的方法有缺点:
当页面注册有onPullDownRefresh事件时会触发该事件;
当页面滚动一定距离时,显示遮罩时页面会回到顶部;
我也遇到同样的问题,但是我看美团的小程序做出来了这个效果,不知道他们怎么做的
一楼说的思路对。
如果弹出层也有滚动,完美的方案是先把背景层设置成fixed高度100%,然后遮罩出现修改背景层的overflow:hidden,遮罩消失修改overflow-y:scroll,大致就是这个思路,亲测,就算修改后也不会导致背景层归顶,完美。
<template name="timeSelect">
<view wx:if="{{id}}" class="stop_bg_scroll" catchtouchmove="preventTouchMove">
<form bindsubmit="bindsubmit" id='{{id}}'>
<!-- 半透明遮挡层 -->
<view class="dialog-mask" bindtap="bindtap" id="mask" style="display:block;"></view>
<view class='time-time'>
<!-- 标题 -->
<view indicator-style="height: 50px;" class="time-title">{{title}}{{yyyy}}-{{MM}}-{{dd}} {{HH}}:{{mm}}:{{ss}}
</view>
<!-- 时间滚动条 -->
<picker-view id="{{id}}" indicator-style="height: 50px;" class='time-content' value="{{value}}" bindchange="bindchange"name="index">
<picker-view-column>
<view wx:for="{{yyyys}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{MMs}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{dds}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view><view class="time-footer">
<button class="time-cancel" formType='submit' id="cancel" data-status="cancel">取消</button>
<button class="time-confirm" formType='submit' id="confirm" data-status="confirm">确定</button>
</view>
</view>
</form>
</view>
</template>
wxss:
.stop_bg_scroll{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
希望有用
那么下拉刷新还有效么?