解决微信小程序滚动事件穿透问题

场景

业务开发中经常会出现弹窗的情况，如果弹窗是静态的，使用catchtouchmove即可解决滚动穿透问题，但是总会有些复杂的场景，比如：弹窗中也需要滚动，使用catchtouchmove会使内外都无法滚动。

解决

使用微信官方提供的 page-meta 组件
官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

示例代码：

<page><!-- page-meta 必须置顶 --><page-meta page-style="overflow: {{isScroll? 'hidden' : 'visible'}}" /><view>页面内容</view><view>弹窗</view>
</page>

当弹窗展示时，将isScroll赋值为true即可。这样页面无法滚动，弹窗内容可正常滚动。

解决微信小程序滚动事件穿透问题相关推荐

解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序滚动播放内容
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
解决微信小程序配置https不成功问题
解决微信小程序配置https不成功问题参考文章: (1)解决微信小程序配置https不成功问题 (2)https://www.cnblogs.com/ant-jmf17/p/8056989.html ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...

解决微信小程序滚动事件穿透问题

场景

解决

示例代码：

解决微信小程序滚动事件穿透问题相关推荐

最新文章

热门文章

解决 微信小程序 滚动 事件穿透 问题

场景

解决

示例代码：

解决 微信小程序 滚动 事件穿透 问题相关推荐

最新文章

热门文章

解决微信小程序滚动事件穿透问题

解决微信小程序滚动事件穿透问题相关推荐