用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2018-4-27 00:26

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

问题描述:

使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动。

解决方案:

给底层页面动态添加 position:fixed;

代码:

wxml:

  1. class="mask" wx:if="{{hasMask}}" bindtap='hideMask'>
  2. 我是遮罩层
  3. style="background-color:#ccc;height:2000rpx{{hasMask?'position:fixed;':''}}width:100%;>
  4. 小程序弹出层点击穿透问题
  5. bindtap='showMask'>弹出遮罩层

js:

  1. Page({
  2. data: {
  3. hasMask:false
  4. },
  5. showMask(e) {
  6. //显示遮罩
  7. this.setData({
  8. hasMask: true
  9. })
  10. },
  11. hideMask(e) {
  12. //隐藏遮罩
  13. this.setData({
  14. hasMask: false
  15. })
  16. }
  17. })

效果图:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Jaye118 来自: cnblogs

相关阅读