[bug]小程序弹出层滚动穿透问题修复
如题,解决方案有两种:
1、如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷)
<template name="popup-modal">
<view class="modal-overlay" catchtouchmove />
<view class="popup" catchtouchmove>
<view class="popup-title">title</view>
<view class="popup-content">content</view>
</view>
</template>
2、如果弹出层有滚动事件,有两种方法:
方法一
在弹出层出现的时候给底部的containerView加上一个class,消失的时候移除。
<view class="{{showMask?'not-scroll':''}}">
.not-scroll{
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
这种方法简单有效,但会改变页面原本滚动的位置(会滚动到顶部)。
方法二
给底部的containerView用<scroll-view>包裹起来,动态设置scroll-y,注意需要添加额外的样式:
//somefile.wxss
.page,
page {
height: 100%;
overflow: hidden;
}
scroll-view {
height: 100%;
}
// somefile.wxml
<scroll-view
scroll-y="{{!showMask}}"
scroll-with-animation
enable-back-to-top="{{!showMask}}">
</scroll-view>
这个方法解决了方案一带来的问题,但因为使用了<scroll-view>标签,又存在以下问题:
- 在 scroll-view 内有fixed定位的隐藏内容,会闪现一下,然后再隐藏的诡异bug。解决办法是将其移动到 scroll-view 外面
- tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
- tip: scroll-into-view 的优先级高于 scroll-top
- tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
- tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部
如何取舍,就看你啦~~
[bug]小程序弹出层滚动穿透问题修复的更多相关文章
- 微信小程序弹出框滚动穿透问题
1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...
- 微信小程序弹出层点击穿透问题
问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- 小程序iphone蒙层滚动穿透
如图,这个弹出层在滚动列表的时候,在iPhone上是会穿透导致页面也跟着滚动,所以这时不能用普通的view标签加scroll属性实现,看了下文档发现有专门的scroll-view组件,用该组件替换就可 ...
- 微信小程序弹出层
1.消息提示 wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.show ...
- 微信小程序弹出层动画特效
.rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...
- 微信小程序 - 弹出层组件
需要的可以下载示例:maskalert
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
- 微信小程序弹出可填写框两种方法
方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...
随机推荐
- 老板说你的UI设计的不高级?你肯定没用这7个技巧...
对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...
- doctotext
文档解析库 http://www.it610.com/article/1936051.htm
- JAVA Get UUID
UUID是通用唯一标识码(Universally Unique Identifier),通过开源软件基金会(OSF)设立的一种算法生成.它的主要作用就是保证生成的字符串在同一时空中所有机器上都是唯一的 ...
- 【Maven】Nexus配置和使用
Nexus安装 nexus安装,可以参照:[Maven]Nexus(Maven仓库私服)下载与安装 Nexus简单说明 用途:指定私服的中央地址.将自己的Maven项目指定到私服地址.从私服下载中央库 ...
- 卡特尔16PF性格测试与答案
大学生在职业生涯规划时,必须充分注意到自己的性格和职业的适宜性.性格是指一个人在生活中形成的对现实的稳定的态度和行为方式.研究表明,性格影响着一个人的职业取向,由于性格的不同,每个人对工作和职业的态度 ...
- spring-data-jpa+hibernate 各种缓存的配置演示
本文所有测试用代码在https://github.com/wwlleo0730/restjplat 的分支addDB上 目前在使用spring-data-jpa和hibernate4的时候,对于缓存关 ...
- 2018.10.08 NOIP模拟 栅栏(树状数组+rand)
传送门 今天的送分题. 首先考虑每次给要围上栅栏的矩阵里的整体加上1,如果栅栏被撤销就整体减1,最后比较两个点的值是否相同来进行判断. 然而这样的效果并不理想,很容易卡掉. 进一步思考,我们第iii次 ...
- 2018.09.01 poj3071Football(概率dp+二进制找规律)
传送门 概率dp简单题. 设f[i][j]表示前i轮j获胜的概率. 如果j,k能够刚好在第i轮相遇,找规律可以发现j,k满足: (j−1)>>(i−1)" role=" ...
- 浅析基于AXIS框架的WebService
一.写在前面 之前做项目用到了基于Axis的WebService,为了更进一步的理解和记忆,在这里通过代码实践和源码分析来完整的做一遍Axis的WebService以及对应的客户端调用实践,并和其它的 ...
- ansible-playbook 主机变量2
ansible-playbook 配置 hosts 后可以指定变量,通过-k 可以交互输入密码,也可以将密码写在 hosts 文件中. 入口 yaml 文件中通过 {{ ** }} 获取变量,命令行通 ...