Vant: [Bug Report] 开启 rem 转换后 Picker 组件选项偏移
lmfuture
All 16 comments
什么问题？ 麻烦提供下 codesandbox 复现链接
chenjiahan
on 23 Jun 2020
不知道是不是我使用上的问题，凡事牵扯到picker的都会有问题，之前的版本van-picker-column__item会在dom上又一个style=‘height:44px;’的样式，但是新版没有，不知道是不是这个的原因，导致所有的picker当数据比较多的时候就会拉不下去，甚至错位。如下链接点击立即投保，里面的生日会拉不下去，后面的form页面中使用到的pciker都会有这个问题
https://test-baobei.zrbx.com/wap/#/pro-detail?proId=18&channelCode=bxx&channelId=1&userId=1&attach=
lmfuture
on 23 Jun 2020
这个问题在电脑浏览器上问题不明显，但是在手机上会有问题
lmfuture
on 23 Jun 2020
height: 44 的样式并没有去掉，挪到 CSS 文件里了，建议你检查下组件样式是否正确引入了
chenjiahan
on 23 Jun 2020
嗯，看到移到css里面了，也许是更新到新版之后存在了缓存，看到交流群有类似的问题，所以就提了issues，不好意思，添麻烦了
lmfuture
on 23 Jun 2020
因为我这边对class做了rem的转化，之前的内联样式并没有被转化掉，所以没有出现问题，应该是这次更新到class里面做了转化导致的问题
lmfuture
on 23 Jun 2020
但是现在不太敢升级新版了
lmfuture
on 23 Jun 2020
升级组件库版本时，建议查看一下更新日志，并且回归测试一下项目的主要功能喔
chenjiahan
on 24 Jun 2020
是的，我这边也出现这个问题了，手机电脑都出现了，采用退回老版本处理了
Fangsiyu
on 24 Jun 2020
手动给一个 :item-height="45" 可以解决。 但是不要给44。 这个问题昨天检测了一下午，还是翻更新日志才找到的。
tangjian1891
on 29 Jun 2020
@tangjian1891 这样每个都得设置一下了，单独把这个过滤掉方便点
module.exports = ({ file }) => {
let remUnit
if (file && file.dirname && file.dirname.indexOf("vant")>-1) {
remUnit = 37.5
} else {
remUnit = 75
}
return {
plugins: {
'postcss-pxtorem': {
rootValue: remUnit,
propList: ['*'],
selectorBlackList: ['van-picker-column__item']
},
'autoprefixer': {}
}
}
}
lmfuture
on 1 Jul 2020
@chenjiahan 如果能把默认值设置回行内就好了，但是我不知道团队的初衷，所以按贵团队的意见把
lmfuture
on 1 Jul 2020
大概知道问题原因了，rem 转换出的单位精度有偏差，比如 44px 转换为 1.17333rem，最终渲染结果是 43.98px，在选项很多时会有一定偏移。
下个版本会把选项高度放回行内样式。
chenjiahan
on 1 Jul 2020
@chenjiahan 感谢
lmfuture
on 1 Jul 2020
已在 2.9.0-beta.3 版本修复
chenjiahan
on 1 Jul 2020
手动给一个 :item-height="45" 可以解决。 但是不要给44。 这个问题昨天检测了一下午，还是翻更新日志才找到的。
我也遇到了 44px 的bug 原来还可以设置item-height 已解决，谢谢
zboboan
on 13 Jul 2020
Related issues
ChangeZhang
·
4Comments
wang475293638
·
3Comments
vvhl
·
3Comments
xlya
·
4Comments
webwuyou
·
3Comments
Most helpful comment
手动给一个 :item-height="45" 可以解决。 但是不要给44。 这个问题昨天检测了一下午，还是翻更新日志才找到的。