uView icon indicating copy to clipboard operation
uView copied to clipboard

当上下滑动 Dropdown 组件,遮罩层没有铺满

Open qeprwjcgya opened this issue 5 years ago • 2 comments

这个方法应该在点击的时候调用,现在是在初始化的时候调用,我是做后端的,前端用词不当请见谅

// 获取下拉菜单内容的高度 getContentHeight() { // 这里的原理为,因为dropdown组件是相对定位的,它的下拉出来的内容,必须给定一个高度 // 才能让遮罩占满菜单一下,直到屏幕底部的高度 // this.$u.sys()为uView封装的获取设备信息的方法 let windowHeight = this.$u.sys().windowHeight; this.$uGetRect('.u-dropdown__menu').then(res => { // 这里获取的是dropdown的尺寸,在H5上,uniapp获取尺寸是有bug的(以前提出修复过,后来又出现了此bug,目前hx2.8.11版本) // H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离,但是元素的bottom值确是导航栏顶部到元素底部的距离 // 二者是互相矛盾的,本质原因是H5端导航栏非原生,uni的开发者大意造成 // 这里取菜单栏的botton值合理的,不能用res.top,否则页面会造成滚动 this.contentHeight = windowHeight - res.bottom; }) }

qeprwjcgya avatar Dec 07 '20 12:12 qeprwjcgya

这个是组件自身的问题,我暂时是修改了他的组件 u-dropdown 里面 增加了个style 在 open() 事件 和 close() 事件中 修改 overflowHidden true 或 false , 这样就不会遮挡 页面内容了

thpngj avatar Jun 28 '21 04:06 thpngj

所以其实就是前端在open事件的时候调用下拉组件的getContentHeight方法就可以了

zhengyn0001 avatar Dec 05 '22 11:12 zhengyn0001