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

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

page-meta 必须是页面内的第一个节点

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

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

onShowDropdownMenu() {

this.setData({

showDropdownMenu: true

})

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant dropdownmenu组件提供了一个简洁实用的下拉菜单下拉菜单滑动与顶部菜单分离是为了提升用户体验和界面的美观度。 通常情况下,当我们点击下拉菜单触发展开时,下拉菜单会以一个覆盖方式展示在顶部菜单下方。与此同时,顶部菜单会保持其原来的位置不动,不受下拉菜单滑动而影响。这样设计的好处有以下几点: 1. 分离顶部菜单和下拉菜单可以更好地区分二者的功能和职责。顶部菜单一般用来展示一级导航或者常用操作,而下拉菜单则用来展示更多的选项或者二级导航。通过分离,用户可以清晰地理解两者的区别。 2. 将下拉菜单与顶部菜单分离也可以避免用户操作的误触发。如果下拉菜单滑动与顶部菜单保持一致,当用户尝试滑动下拉菜单时,可能会意外触发到顶部菜单,导致用户界面的切换或功能的误操作。通过分离二者的滑动,可以减少此类问题的发生。 3. 分离后的下拉菜单可以更灵活地展现多级菜单。如果下拉菜单滑动与顶部菜单保持一致,可能会限制下拉菜单的高度,并难以展示多级菜单。通过与顶部菜单分离,下拉菜单可以自由展开并支持多级子菜单,提供更好的导航和选择体验。 综上所述,vant dropdownmenu下拉菜单滑动与顶部菜单分离是为了优化用户体验、清晰区分功能和避免误操作等方面的考虑。这样的设计可以提升用户界面的整体美观度和可用性,更好地满足用户的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值