折腾：
【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期
期间，去研究：
lanjingling0510/react-mobile-datepicker: ? ? look a demo, Please imitate mobile environment.
https://github.com/lanjingling0510/react-mobile-datepicker
的代码，其中看到代码：
addPrefixCss(obj, { transition: ‘transform .2s ease-out’ }); const scrollStyle = formatCss({ transform: `translateY(${this.state.translateY}px)`, marginTop: this.state.marginTop, }); |
怀疑是：
transform
对于android的浏览器不支持？
ChromClient transform not work
ChromeClient transform not work
html – CSS3 transform not working – Stack Overflow
好像需要给（此处是li）设置：
display: block
display: inline-block
然后也去调试看了看：
果然是：
滚动的时候，实时的可以看到html元素内容发生变化了：
<ul class="datepicker-scroll" style="transform: translateY(-200px); margin-top: 0px;"><li class="">2010年</li><li class="">2011年</li><li class="">2012年</li><li class="">2013年</li><li class="">2014年</li><li class="">2015年</li><li class="">2016年</li><li class="">2017年</li><li class="">2018年</li><li class="">2019年</li></ul> |
也看到源码中，对于：
滚动的实现，是通过：
设置this.state.translateY的值去实现的
然后滚动效果是通过：
/** * 格式化css属性对象 * @param {Object} props 属性对象 * @return {Object} 添加前缀的格式化属性对象 */ export function formatCss(props) { const prefixs = [‘-webkit-‘, ‘-moz-‘, ‘-ms-‘]; const result = {}; const regPrefix = /transform|transition/; for (const key in props) { if (props.hasOwnProperty(key)) { const styleValue = props[key]; // 如果检测是transform或transition属性 if (regPrefix.test(key)) { for (let i = 0; i < prefixs.length; i++) { const styleName = camelCase(prefixs[i] + key); result[styleName] = styleValue.replace(regPrefix, `${prefixs[i]}$&`); } } result[key] = styleValue; } } return result; } |
去实现的。
而此处可以看到：
已经对于css的transform去加上
参考：
css – -webkit-transform does not work in Android webview – Stack Overflow
https://stackoverflow.com/questions/10509432/webkit-transform-does-not-work-in-android-webview
.transofmr { -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ transform: rotate(30deg); width:200px; height:200px; background-color:#339933; } |
的’-webkit-‘, ‘-moz-‘, ‘-ms-‘前缀了。
所以不需要自己再去加了。
但是好像没有看到此处的css中给每行li去加：
display: inline-block;
或：
display: block;
先不管了，先去给：
datepicker-scroll
加上：
display: block;
以及给：
li加上：
display: inline-block;
.datepicker-scroll { display: block; list-style-type: none; &>li { display: inline-block; height: 40px; line-height: 40px; font-size: 1.375em; cursor: pointer; } } |
看看效果。
结果月和日都两行显示了：
只给li加上display:block;
.datepicker-scroll { list-style-type: none; &>li { display: block; height: 40px; line-height: 40px; font-size: 1.375em; cursor: pointer; } } |
则是正常的：
然后发布到服务器，去android端看看，是否能解决问题：
问题依旧。
然后通过打印：
render() { const scrollStyle = formatCss({ transform: `translateY(${this.state.translateY}px)`, marginTop: this.state.marginTop, }); // ref="scroll" console.log(scrollStyle); |
输出的是：
Object {WebkitTransform: "translateY(-200px)", MozTransform: "translateY(-200px)", MsTransform: "translateY(-200px)", transform: "translateY(-200px)", marginTop: 0} MozTransform:"translateY(-200px)" MsTransform:"translateY(-200px)" WebkitTransform:"translateY(-200px)" marginTop:0 transform:"translateY(-200px)" __proto__:Object |
而另外的之前可以正常滚动的Picker，看看是否加了这些属性
好像也没有，不过人家是通过：
this.setState({ style: { transform: `translate3d(0px, ${ this.currentY }px, 0px)` } }); |
去实现滚动的。
【已解决】css实现滚动和转换时用那个好：translate3d vs translateY
然后再去试试：
【已解决】如何把translateY的代码转换为translate3d
结果换成了：translate3d还是问题依旧。
【总结】
所以截至目前来看：
android端的日趋选择滑动失效，和Android端浏览器对于translateY，translate3d等支持是否不够好是没有关系的。是其他原因导致滑动有问题的。
转载请注明：在路上 » 【已解决】尝试看看是否是Android浏览器对transform和translateY支持不够好导致无法滚动选择日期