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

更新日期: 2019-09-11 阅读次数: 336 字数: 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;  
}

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

爱评论不评论

近期节日

2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日