vant DropdownMenu 下拉菜单组件穿透问题

问题描述:在微信小程序中使用Vant组件库提供的DropdownMenu 下拉菜单组件时,当内容超过一定高度时,随着页面内容部分的滚动,顶部会出现部分间隙,继续划动会导致底层页面的滚动,这就是滚动穿透。

解决方案(禁止滚动穿透)
DropdownMenu下拉菜单组件内部结合了Popup弹出层组件。
目前,Popup组件可以通过lock-scroll属性处理部分滚动穿透问题。
但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。
不过,Vant组件为开发者提供了一个推荐方案以完整解决滚动穿透:page-meta

当小程序基础库最低版本在 2.9.0 以上时,即可使用 page-meta 组件动态修改页面样式

首先开发者在wxml页面中定义如下代码:
<!-- page-meta 只能是页面内的第一个节点 -->

<page-meta page-style="{{ showDropdownMenu ? 'overflow: hidden;' : '' }}" />

其次需要控制page-style属性值,当下拉菜单显示时,将page-style属性值设置为overflow: hidden,隐藏时置空,这样就很好的解决了滚动穿透的问题。

页面部分:

js部分:

openDropdown() {   this.setData({showDropdownMenu: true })},

closeDropdown() {  this.setData({showDropdownMenu: false }) },

 

posted @ 2023-10-30 15:26  土小狗  阅读(230)  评论(0编辑  收藏  举报