首页 > 其他分享 >vant DropdownMenu 下拉菜单组件穿透问题

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

时间:2023-10-30 15:35:49浏览次数:33  
标签:滚动 vant page 穿透 组件 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 }) },

 

标签:滚动,vant,page,穿透,组件,DropdownMenu,下拉菜单
From: https://www.cnblogs.com/panwudi/p/17797977.html

相关文章

  • vant时间选择器中对minDate进行初始化
    vant组件库中,DatetimePicker可以通过min-date和max-date属性确定可选的时间范围。但他只支持Date类型,时间戳的话会报错,需要转换一下<van-popupv-model="showStartTime"position="bottom"><van-datetime-pickerv-model="defaultStartDate"......
  • vue el-select 下拉菜单 数据回显不在清除数据可编辑状态
    思路:当点击options的时候,让select失去焦点(跳到其他的地方),添加el-input就是为了把光标跳转到其上面,然后将其隐藏掉,则为看不到光标点,但是在点击第一次之后获取焦点focus之后,隐藏掉下拉菜单的时候@blur是无效的,此时只能通过监听下拉框是否是隐藏和显示状态来让其失去焦点事件,所以......
  • 微信小程序--6.初次使用vant报错
    6、由于使用了ts踩到的安装vant的坑,重点在第4步1)在根目录下执行安装依赖的命令npmi@vant/weapp-S--production2)修改app.json将app.json中的 "style":"v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。3)修改project.conf......
  • 关于vant移动端的样式使用hbuilderX打包成app时数据请求失败的问题
    项目使用的是vant4,在使用hbuilderX打包时,发现请求后端失败,然后在网上查了一下说是因为在apk中不存在跨域的问题,所以不需要进行代理设置那就取消代理试试吧(注:我这里使用的是cli3):api.js中写入exportconstlogin=(data)=>{//登录  returnaxiosPost('http://xxx.xxx.......
  • vue2自定义指令实现el-dropdown下拉菜单项最小宽度等于内容宽度
    //在main.js添加Vue.directive('siem-dropdown',function(el,binding,vNode){letul=el.querySelector("ul")letuid=vNode.componentInstance._uid;//获取下拉菜单实例的uidletsiemDropdownClass=`siem-dropdown-${uid}`;ul.cla......
  • vue 模拟商城 vant的使用
    新建vue项目 main.jsimportVuefrom'vue'importAppfrom'./App.vue'importstorefrom"@/store";importrouterfrom"@/router";import'@/utils/vant-ui';Vue.config.productionTip=false;newVue({render......
  • vant4中的Toast跟popup的背景颜色冲突了
    vant4中的Toast跟popup的背景颜色冲突了toast出来的是一个白色小块借鉴这位博主的方法https://blog.csdn.net/yangyaqinger/article/details/130680705加上<style>.van-toast--text{background:rgba(0,0,0,0.7)!important;}</style>就可以了 ......
  • bootstrap_下拉菜单
     <divclass="form-group"><labelfor="inputPassword3"class="col-sm-2control-label">机台</label><divclass="col-sm-10">&......
  • 使用jQuery获取下拉菜单项的选定值
    对于单个selectdom元素,获取当前选择的值:$('#dropDownId').val();获取当前选定的文本:$('#dropDownId:selected').text(); 您是否为选择元素提供了id?<selectid='dropDownId'>...你的第一句话应该有用! varvalue=$('#dropDownId:selected').text()......
  • avue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲
    avue表单组件后台拖拉拽框架avue-form-design:https://github.com/sscfaith/avue-form-designavue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲染转换适配待补充......