背景
俗话说,产品有三宝:弹窗、浮层加引导,足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说,实现一个模态框基本都可以达到信手拈来的地步,但是,当模态框里边的内容滚动起来以后,就会出现各种各样的让人摸不着头脑的问题,其中,最出名的想必就是滚动穿透。
那么,什么是滚动穿透呢?滚动穿透即:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透”。了解了什么是滚动穿 透以及它出现的场景,那么,接下来就直接进入正题。
那我们如何解决该问题呢?
- 页面最外层view设置position: fixed;页面不可滚动,但是这个时候会导致页面回到顶部(不推荐)。
- 滚动时监听滚动距离,弹窗时记录滚动位置,关闭弹窗后使用wx.pageScrollTo回滚到记录的位置(不推荐,比较消耗性能)。
- 使用page-meta组件,通过该组件我们可以操作Page的style样式,类似于h5里body设置overlow: hidden; 控制页面不可滚动。文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html (推荐,官方组件,比较好用)
- 使用wx.setPageStyle设置overflow: hidden; 也可以实现给Page组件设置样式。(次要推荐,调用方式简单,但由于官方未对外透出该API,存在下架风险)
page-meta组件:
通过该组件我们可以直接操作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都不会穿透影响底部的内容。
wx.setPageStyle方法:
调用这个api,动态设置它为hidden/visible,用于控制页面是否可滚动
wx.setPageStyle({
style: {
overflow: 'hidden'
}
})
跟 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,这一篇写得特别详细,楼主也可以看看!
收藏起来
[渲染层错误] [Component] <page-meta>: 只能是页面内的第一个节点,且不能被 wx:if 或 wx:for 动态变更
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
然后如果page-meta不行,可以尝试文章内贴第二种方式。
很有效,不过感觉切换的时候有些卡顿