微信小程序中 Vant DropdownMenu 下拉菜单组件穿透问题

秒速五厘米 2023-10-11 17:27 20阅读 0赞

## Vant DropdownMenu 下拉菜单组件穿透问题 ##

### 问题描述 ###

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

### 问题复现 ###

![遮罩层滑动穿透问题][41c6db5f01d447dbaa98a1df18de336e.png_pic_center]

### 解决方案（禁止滚动穿透） ###

**DropdownMenu**下拉菜单组件内部结合了**Popup**弹出层组件。

目前，**Popup**组件可以通过**lock-scroll**属性处理部分滚动穿透问题。

但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。

不过，Vant组件为开发者提供了一个推荐方案以完整解决滚动穿透：**page-meta**

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

首先开发者在**wxml**页面中定义如下代码：

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

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

onShowDropdownMenu() {
        
       this.setData({
        
         showDropdownMenu: true
       })
     }

[41c6db5f01d447dbaa98a1df18de336e.png_pic_center]: https://img-blog.csdnimg.cn/41c6db5f01d447dbaa98a1df18de336e.png#pic_center
[page-meta]: https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序中 Vant DropdownMenu 下拉菜单组件穿透问题

Vant DropdownMenu 下拉菜单组件穿透问题问题描述在微信小程序中使用Vant组件库提供的DropdownMenu下拉菜单组件时，当内容超过一定高度

秒速五厘米/ 2023年10月11日 17:27/ 0 赞/ 21 阅读

相关微信小程序下拉刷新

实现步骤：打开项目根目录下的app.json文件，然后给 window 对象新添加一个 "enablePullDownRefresh":true 属性，开启所有页面的下

以你之姓@/ 2023年02月22日 13:52/ 0 赞/ 13 阅读

相关原生微信小程序，实现下拉菜单，带遮罩层，出现隐藏动画（dropDownMenu思路总结）

原生微信小程序，实现下拉菜单，带遮罩层，出现隐藏动画（dropDownMenu思路总结）实现效果 ![在这里插入图片描述][20200908101436536.g

Love The Way You Lie/ 2022年12月04日 14:57/ 0 赞/ 342 阅读

相关微信小程序下拉框组件

》》下拉组件 1.组件结构： ![006cf615daea5f457f8da98bd1e020cd.png][] 2.index.js： ![复制代码][48304ba

布满荆棘的人生/ 2022年10月16日 07:12/ 0 赞/ 235 阅读

相关微信小程序+Vant UI入门

准备工作 1、[npm支持][npm] 2、[youzan/vant-demo][youzan_vant-demo] 3、[轻量、可靠的小程序 UI 组件库][UI]

小咪咪/ 2022年10月12日 00:44/ 0 赞/ 201 阅读

相关微信小程序仿闲鱼『下拉菜单』

下拉菜单我们非常常见了，但是要在微信小程序中实现并不容易，今天带来的是仿闲鱼下拉菜单，相信对您有一定的帮助~~ 先看效果： ![这里写图片描述][SouthEast] 麻

客官°小女子只卖身不卖艺/ 2022年07月14日 13:21/ 0 赞/ 226 阅读

相关微信小程序仿闲鱼『下拉菜单』

下拉菜单我们非常常见了，但是要在微信小程序中实现并不容易，今天带来的是仿闲鱼下拉菜单，相信对您有一定的帮助~~ 先看效果： ![764c2d70caf9d3af102e.g

爱被打了一巴掌/ 2022年05月23日 13:49/ 0 赞/ 300 阅读

相关微信小程序CSS3动画下拉菜单

微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个思路利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使

柔光的暖阳◎/ 2022年05月22日 06:18/ 0 赞/ 200 阅读

相关微信小程序开发模拟下拉菜单

一.知识点 1.实现动态显示和隐藏某个控件 <view class="\{ \{open?'display\_show':'display\_none'\}\}">列表1<

灰太狼/ 2021年09月12日 07:08/ 0 赞/ 498 阅读

相关微信小程序下拉刷新

框架->小程序配置->页面配置 api->界面->下拉刷新 (1)、在对应页面设置,若在app.json的'window'中设置,则会使得所有

淩亂°似流年/ 2021年07月24日 21:02/ 0 赞/ 489 阅读