当前位置: 首页 > article >正文

微信小程序设置弹框底下内容不能移动 滚动(滚动穿透问题)

 使用catchtouchmove="true",可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动,如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。

<view class="modal" catchtouchmove="true">
    <view class="shade"></view>
    <view class="content"></view>
</view>

注意:模拟器是无法调试,要手机上才可测试出不能滚动

2、底部内容区使用scroll-view

设置垂直滚动,并将scroll-view的高度设置为屏幕高度,这样就可以实现弹窗自身内容滚动时,而底层内容不滚动。

<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
    底部内容
</scroll-view>
<view class="modal"></view>
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*获取屏幕高度*/
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight
    })
  },


http://www.kler.cn/news/362568.html

相关文章:

  • 如何在 Debian VPS 上使用 mod_wsgi 和 Apache 运行 Django,并使用 virtualenv Python 环境
  • STM32G4系列MCU的低功耗模式介绍
  • python 中 map,split,join
  • 10. 异常处理器
  • xtu oj 最多的可变换字符串
  • ubuntu 开启haproxy UI
  • 【鼠鼠学AI代码合集#8】线性神经网络
  • Vue封装组件并发布到npm仓库
  • 【ROS2】Qt和ROS混合编程:多继承QObject和rclcpp::Node
  • LRU算法
  • ATmega128定时器里面的定时器和外部中断配置
  • ElasticSearch基本概念
  • 微软主动出击,“钓”出网络钓鱼者
  • 关于在ubuntu服务器上无法守护长链接命令的问题
  • 自动化数据库管理:如何通过存储过程动态创建 MySQL 对象
  • Python中的字符串修剪:strip()、lstrip() 和 rstrip()
  • 1U服务器和Hyper-V虚拟机使用记录
  • [Linux网络编程]06-I/O多路复用策略---select,poll分析解释,优缺点,实现IO多路复用服务器
  • 设计模式基础知识以及典型设计模式总结(上)
  • Spring Boot驱动的汽车销售网站架构优化
  • ansible playbooks
  • 关于WPF项目降低.Net版本
  • Unity性能优化2【脚本篇】
  • 电脑改ip地址怎么弄?一键操作与多种方法详解
  • 存储过程(SQL)
  • (3) c++基本代码