如题,解决方案有两种:

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. 微信小程序弹出框滚动穿透问题

    1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...

  2. 微信小程序弹出层点击穿透问题

    问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...

  3. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  4. 小程序iphone蒙层滚动穿透

    如图,这个弹出层在滚动列表的时候,在iPhone上是会穿透导致页面也跟着滚动,所以这时不能用普通的view标签加scroll属性实现,看了下文档发现有专门的scroll-view组件,用该组件替换就可 ...

  5. 微信小程序弹出层

    1.消息提示     wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.show ...

  6. 微信小程序弹出层动画特效

    .rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...

  7. 微信小程序 - 弹出层组件

    需要的可以下载示例:maskalert

  8. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  9. 微信小程序弹出可填写框两种方法

    方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...

随机推荐

  1. exit--进程退出;wait--进程等待;execl--执行程序

    函数原型:void exit(int status) 参数说明:退出状态. 函数原型:pid_t wait(int *status) 头文件:#include<sys/types.h>,# ...

  2. 2018.08.30 NOIP模拟 kfib(矩阵快速幂+exgcd)

    [输入] 一行两个整数 n P [输出] 从小到大输出可能的 k,若不存在,输出 None [样例输入 1] 5 5 [样例输出] 2 [样例解释] f[0] = 2 f[1] = 2 f[2] = ...

  3. hdu-1058(动态规划)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1058 题意:求只由2,3,5,7的乘积组成的数,输出格式见output 思路:开始想打表,后来打表超时 ...

  4. 按条件设置gridcontrol 单元格属性

    等价代码设置:(注意这里使用都是FieldName, 即绑定对象的字段名) var cn = new StyleFormatCondition(FormatConditionEnum.Expressi ...

  5. ansible-playbook api 2.0 运行项目

    上篇 api 的文章 <ansible-playbook api 2.0 直接运行> 介绍的是直接将 tasks 直接写在 代码中的,本文介绍 api 运行整个项目 [root@10_1_ ...

  6. python+django+mysql配置步骤

    安装python 详细步骤见:地址 1. 从 http://www.python.org/download/ 下载最新的python版本 (我用的是python2.6, 当时最稳定的) 2. 然后一路 ...

  7. ZOJ2481 Unique Ascending Array 2017-04-18 23:08 33人阅读 评论(0) 收藏

    Unique Ascending Array Time Limit: 2 Seconds      Memory Limit: 65536 KB Given an array of integers ...

  8. hdu 4956

    http://acm.hdu.edu.cn/showproblem.php?pid=4956 首先给出一个范围 [l, r],问能否从中找到一个数证明 Hanamichi's solution 的解法 ...

  9. ViewGroup onInterceptTouchEvent,ViewGroup onTouchEvent,View onTouchEvent执行顺序说明

    今天抽出了一些时间实践了viewgroup和view的触摸事件顺序,之前也试过,总是忘记,今天记下笔记说明一下 首先 onInterceptTouchEvent只会出现在viewgroup中,view ...

  10. Using Integrated SOA Gateway in Oracle EBS(websevice)

    http://blog.csdn.net/pan_tian/article/details/10159935 Oracle EBS如何与第三方系统相集成?比如这样的需求,X系统知道物料编码,需要从EB ...