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

小程序 解决自定义弹窗滚动穿透问题,解决弹窗背景内容滚动问题

方法一、catchtouchmove="true",

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

<view class="pop" catchtouchmove="true">
    <view class="content"></view>
</view>

方法二、固定定位(可以解决背景不要滚动,弹框能滚动的问题)

当出现弹窗时,为wxml最外层元素动态添加fixed类。但是这种方式会导致页面自动回到顶部。

方法三、底部内容区使用scroll-view(完美解决上面两种方法的弊端) 

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

http://www.lryc.cn/news/178374.html

相关文章:

  • win10搭建Selenium环境+java+IDEA(2)
  • 抢先一步感受未来:Raspberry Pi 5正式发布!
  • 【教程】Ubuntu自动查看有哪些用户名与密码相同的账户,并统一修改密码
  • 基于 Python+DenseNet121 算法模型实现一个图像分类识别系统
  • 贪心算法-点灯问题
  • 软件测试之单元测试自动化入门基础
  • 93 # 实现 express 错误处理中间件
  • PHP 创建 MySQL 表
  • 中兴R5300 G4服务器iSAC管理员zteroot密码遗失的重置方法及IPV6地址启用设置
  • 大数据分布式处理框架Hadoop
  • echarts学习总结
  • 与初至波相关的常见误解
  • screenfull全屏、退出全屏、指定元素全屏的使用步骤
  • 问题 - 谷歌浏览器 network 看不到接口请求解决方案
  • Java:正则表达式的命名捕获组
  • ELK 处理 Spring Boot 日志
  • No152.精选前端面试题,享受每天的挑战和学习
  • Flutter:类功能索引(全)
  • 电脑技巧:笔记本电脑升级固态硬盘的注意事项,看完你就懂了
  • TLS/SSL(一)科普之加密、签名和SSL握手
  • UVA-1374 旋转游戏 题解答案代码 算法竞赛入门经典第二版
  • logback.xml springboot 项目通用logback配置,粘贴即用,按日期生成
  • 【AI视野·今日CV 计算机视觉论文速览 第256期】Thu, 28 Sep 2023
  • 2023-9-28 JZ26 树的子结构
  • ElementUI之首页导航+左侧菜单
  • 【Linux学习】04Linux实用操作
  • 一篇博客学会系列(1) —— C语言中所有字符串函数以及内存函数的使用和注意事项
  • 计算机视觉与深度学习-循环神经网络与注意力机制-RNN(Recurrent Neural Network)、LSTM-【北邮鲁鹏】
  • brew 安装MySQL 5.7
  • 【中国知名企业高管团队】系列22:滴滴