前言:我们在开发业务的过程中总会有各种样式的弹窗需求,在弹窗弹起来的时候,底部的内容却可以滚动,刚开始我们使用catchtouchmove解决了,但是在复杂一点的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。
使用官方的page-meta组件,这里贴下官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html
通过该组件我们可以直接操作Page
组件 ,我们给它的wxss样式overflow动态设置hidden
orvisible
orauto
就可以控制整个页面是否可以滚动。
示例代码:
<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />
<button class="button" bindtap="handleClick">点我弹出弹窗</button>
<!-- 模拟页面滚动 -->
<view wx:for="{{300}}" wx:key="index">{{item}}</view>
<!-- 模拟弹窗 -->
<view class="dialog-wrap {{visible ? 'active' : ''}}">
<view class="dialog-back {{visible ? 'active' : ''}}"></view>
<view class="share-box-container {{visible ? 'active' : ''}}">
<view class="share-content">
<!-- 模拟弹窗内容滚动 -->
<view class="share-box" wx:for="{{300}}" wx:key="index">{{item}}</view>
</view>
</view>
</view>
控制弹窗显隐藏:
const app = getApp()
Page({
data: {
visible: false
},
onLoad() {
},
handleClick() {
this.setData({
visible: !this.data.visible
})
}
})
wxss弹窗样式太多,这里就不贴,放代码片段里了。
兼容底部是scroll-view,以及弹窗内是scroll-view都不会穿透影响底部的内容。
跟 web 里面的 Helmet 组件有点儿类似,可以用来修改 page-meta 信息。
page-meta 组件在 iPhone8 上无效,大佬们有遇到这种兼容问题吗?
<!--首页-->
<wxs src="../../../../page/wxs/util.wxs" module="mUtil"></wxs>
<page-meta page-style="overflow: {{pageOverflowVisible ? 'visible' : 'hidden'}}" />
<parent-component>
<child-component></child-component>
</parent-component>
<!-- 弹窗在 child-component 组件内显示隐藏-->
弹窗弹出时,直接把底部的scroll-view的scroll-y设置为false,就可以阻止底层滚动了呀,不需要用这个page-meta吧
感谢大佬。之前用catchtouchmove解决,后来弹窗变复杂就突然不好使了。。这个方法确实简单快捷
麻烦问下pageMeta在taro中怎么使用啊?
老哥 这个方法很稳
https://developers.weixin.qq.com/community/develop/article/doc/000e40918dc420f5f61c2001a56013,这一篇写得特别详细,楼主也可以看看!
怎么还是不行呢, 还是可以被穿透!
咋没有效果
还是能穿透
很奈斯,正好遇到catchtouchmove不好用的情景了