Vue 组件库 Vant 的 Picker 选择器使用问题汇总

更新日期: 2019-09-11 阅读次数: 26524 字数: 309 分类: VueJS

van-popup 不显示

bug 现象:

触发 picker 弹出事件后,van-overlay 黑色背景已出现,但是包含 van-picker 的 van-popup 并未显示出来。

Chrome 工具里看了一下, fixed 并未生效,虽然 position: fixed; 并没有被覆盖,但是显然是没有生效。

StackOverflow 上搜索了一下,说可能是父级元素使用 transform 影响到了 fixed 的生效。

于是,将父级元素中的

-webkit-transform: translateZ(0);

注释掉。果然 van-popup 就可以看到了。

translateZ(z) 定义 3D 转换,只是用 Z 轴的值。

触发 picker 时,背景页面自动移动到页面顶部

异常诡异,我看是显示 picker 时,vant 自动给 body 增加了一个 class van-overflow-hidden。

.van-overflow-hidden {
    overflow: hidden!important;
}

使用了 overflow: hidden 之后,后台页面被禁用了滚动,页面直接返回顶部。体验非常不好,导致选择完成后,无法继续编辑下面的字段。

临时解决方案,使用样式覆盖。

body.van-overflow-hidden {
    overflow: visible !important;  
}

但是这样做,有一个副作用,就是会导致后台可以滚动,如何禁止后台滚动?

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式