首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

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

  • 25-02-17 22:20
  • 3637
  • 6473
blog.csdn.net

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

  1. <view class="modal" catchtouchmove="true">
  2. <view class="shade"></view>
  3. <view class="content"></view>
  4. </view>

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

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

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

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

注:本文转载自blog.csdn.net的大大。的文章"https://blog.csdn.net/weixin_43923808/article/details/143187326"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

119
小程序
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2024 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top