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

更新日期: 2019-09-11 阅读次数: 2147 字数: 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 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2019年11月20日 国际儿童日
2019年11月21日 世界问候日
2019年11月22日 小雪
2019年11月22日 感恩节
2019年11月29日 黑色星期五
2019年12月01日 世界艾滋病日
2019年12月03日 国际残疾人日
2019年12月07日 大雪
2019年12月09日 "一二九"运动纪念日
2019年12月09日 世界足球日
2019年12月10日 世界人权日
2019年12月12日 西安事变纪念日
查看更多节日