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


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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
js实现自定义路由
Feb 04 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
简述vue中的config配置
Jan 23 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
Vue父子组件传值的一些坑
Sep 16 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
移动节点的jquery代码
2014/01/13 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
JavaScript闭包的简单应用
2017/09/01 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python文件比较示例分享
2014/01/10 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
乡镇网格化管理实施方案
2014/03/23 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
安全生产奖惩制度
2015/08/06 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Python字符串常规操作小结
2022/04/03 Python
python playwright之元素定位示例详解
2022/07/23 Python