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


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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
javascript时间差插件分享
Jul 18 Javascript
javascript如何创建对象
Aug 29 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
js实现简易ATM功能
Oct 27 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简单统计字符串单词数量的方法
2015/06/19 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python实现控制台打印的方法
2019/01/12 Python
python psutil模块使用方法解析
2019/08/01 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python把一个字符串切开的实例方法
2020/09/27 Python
鱼油专家:Omegavia
2016/10/10 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers