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

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

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

爱评论不评论

近期节日

2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
查看更多节日