最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】尝试看看是否是Android浏览器对transform和translateY支持不够好导致无法滚动选择日期

Android crifan 7034浏览 0评论

折腾:

【部分解决】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

javascript – Applying css class with webkit transform does not work in Safari or Chrome – Stack Overflow

 然后也去调试看了看:

果然是:

滚动的时候,实时的可以看到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支持不够好导致无法滚动选择日期

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.178 seconds, using 22.20MB memory