解决微信小程序中的滚动穿透问题


Posted in Javascript onSeptember 16, 2019

Mask-Scroll

> 原码地址 *

蒙层防穿透问题

> 蒙层穿透就是,当你用fixed 布局让蒙层显示的时候, 手指滑动屏幕会出现底部内容也滑动的现象. 如图:

解决微信小程序中的滚动穿透问题

当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动。 这就是蒙层穿透, 也可以叫 '滚动穿透'. 当然出现这种情况, 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头...)

解决微信小程序中的滚动穿透问题

## 解决方案

这种要分情况,

  • 当蒙层没有滚动条的时候。
  • 当蒙层出现滚动条的时候

1. 当弹窗没有滚动条的时候。

直接监听 catch:touchmove 方法, 然后直接返回就可以了。

代码可以去看fixed 目录下的文件

主要代码:

*// wxml*
 <view 
​ class="fixed-mask"
​ bind:tap="hideMsak"
​ wx:if="{{isShowMask}}"
​ catch:touchmove="stopMove">
​ <view class="mask-container" >
​  <view class="mask__item">
​  I am {{dogName}}
​  </view>
​ </view>
 </view>
 *// css*
 .fixed-mask {
 position: fixed;
 left: 0;
 top: 0;
 height: 100vh;
 width: 100vw;
 background: #333;
 opacity: 0.8;
 z-index: 2;
}
.mask-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.mask__item {
 margin: 0 auto;
 background-color: #ff0015;
 text-align: center;
 width: 500rpx;
 height: 500rpx;
 line-height: 500rpx;
 margin-bottom: 20rpx;
}
*// js*
 stopMove () {
​ return;
 }

效果如下:

解决微信小程序中的滚动穿透问题

上面是当弹窗没有滚动条的情况, 当弹窗出现滚动条的时候。

哦豁, 完蛋, 弹窗不能滚动了。

2. 当弹窗有滚动条的时候

方法一:

动态给底部滚动的元素 添加固定定位。也就是当出现弹窗的时候添加一个 class 样式类

效果如图:

解决微信小程序中的滚动穿透问题

代码在scroll1 文件夹。

*// css* 

.bottom-fixed {

 position: fixed;

 left: 0;

 top: 0;

 overflow: hidden;

}

*// wxml*

 <view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view>

大家可以看到 因为底部元素给固定到页面顶部了, 而不是你点击弹窗时出现的位置。目前自己还没有找到解决方法。 如果大佬有会的, 不吝赐教。。

*方法二:*

> scroll-view 设置高度 以及纵向滚动方向。

不过scroll-view 会有一些bug

详情查看

代码在scrooll 文件夹

效果如下图:

解决微信小程序中的滚动穿透问题

总结

以上所述是小编给大家介绍的解决微信小程序中的滚动穿透问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
微信小程序左滑删除实现代码实例
Sep 16 #Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 #Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 #Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 #Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 #Javascript
layui使用templet格式化表格数据的方法
Sep 16 #Javascript
layui监听单元格编辑前后交互的例子
Sep 16 #Javascript
You might like
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Python 连连看连接算法
2008/11/22 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python如何调用外部系统命令
2019/08/07 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python 动态绘制爱心的示例
2020/09/27 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
公司员工检讨书
2014/02/08 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
总经理岗位职责范本
2015/04/01 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs