用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

小程序自定义弹窗出现时禁止底层页面滚动

Rolan 2021-1-13 13:41

期望在有弹窗出现时, 下面的内容不允许滚动. 卑微的我只能去想办法解决下, 那么该怎么解决呢?

最近在做小程序开发、测试反馈了个问题:期望在有弹窗出现时, 下面的内容不允许滚动. 卑微的我只能去想办法解决下, 那么该怎么解决呢?

实现方案

  1. 小程序自带-> catchtouchmove;
  2. 使用position:fixed禁止页面滚动;
1. 小程序自带-> catchtouchmove实现demo

注意事项:

a. 在微信开发者工具测试是没有用的, 需要在真机上查看效果[∵触摸事件];
b. catchtouchmove若定义成方法、则必须申明、否则控制台会有警告[空函数即可];
c. 经测试, catchtouchmove的值只要是非空字符即可, 这也是为什么在网上看到会有写个true也可阻止页面滚动的原因;

Tips: 以下代码可直接拷贝查看效果

// wxss
/* 通过设定较大的height模拟内容区数据太多、需要滚动 */
.content{
  height: 2000rpx;
  overflow: auto;
}
.btn{
  padding: 10rpx 40rpx;
  background: aquamarine;
  color: #ffffff;
  font-size: 28rpx;
  margin: 0 auto;
}
.modal-layer{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400rpx;
  height: 400rpx;
  color: black;
  background-color: #ffffff;
  z-index: 101;
}
复制代码
// js
const app = getApp()

Page({
  data: {
    showModal: false,
  },
  // 出现弹窗
  showModal() {
    this.setData({
      showModal: true
    })
  },
  // 关闭弹窗
  closeModal() {
    this.setData({
      showModal: false
    })
  },
  // 空方法、避免出现警告
  prevent() { }
})
复制代码

接下来在真机上看看效果:

这种方法是比较推荐的方法、当然也还有其它方法可以实现,下面就再说一种叭~

2. 使用position:fixed禁止页面滚动;

实现原理: 在弹窗出现时禁止页面滚动;在弹窗关闭时放开页面滚动;
注意事项: a. 此种做法视觉上面有点缺陷: 虽说页面禁止滚动了、But还是能看到滚动条滚来滚去的, 真让人讨厌.

// 整体沿用上面的demo, 以下仅针对需要改动的部分做说明
// wxml

  
  点我显示弹窗


  弹窗内容区

// wxss
/* 
top:0 不建议写:若本来在页面底部、然后显示弹窗的同时会因top:0导致底层滚动回顶部 -> 不合理  
*/
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

作者:bug制造者
链接:https://juejin.cn/post/6910484514695282701
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏