vant组件搜索并选择_Vue 组件库 Vant 的 Picker 选择器使用问题汇总

66 阅读 0 评论 44 点赞

我是靠谱客的博主烂漫网络，最近开发中收集的这篇文章主要介绍vant组件搜索并选择_Vue 组件库 Vant 的 Picker 选择器使用问题汇总，觉得挺不错的，现在分享给大家，希望可以做个参考。

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;

}

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

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。