小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)

简介: 小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)

小程序自带的弹窗比较简单,在实际项目中,我们往往需要自定义弹窗以满足较为复杂的业务需求。弹窗时底层内容一般都是不滚动,我们可以用下面几种方法实现:

1、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
    })
  },

3、固定布局/绝对定位

.forbidScroll {
  position: fixed/absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

tip:有尝试过为wxml最外层元素添加overflow: hidden来实现禁止滚动,然而发现只有为page元素添加该样式才起作用,而在js中又无法动态为page添加样式。

在小程序中查看效果

相关文章
|
6月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
219 0
|
6月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
6月前
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
6月前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
30天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
395 1
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
59 0
微信小程序:自定义关注公众号组件样式
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
139 0
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
83 0
|
4月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
57 0
|
3月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
127 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar

热门文章

最新文章