5+ App上ios版本mui.prompt问题

场景

平台:

dcloud 5+ APP

问题点:

mui.prompt弹出输入框

问题描述:

ios版本,点击输入框,键盘弹起,弹出框的位置发生改变,垂直方向正常,水平方向弹出框只有一半显示在屏幕右侧。关闭键盘,弹出框能恢复到水平和垂直方向都居中的位置。

android版本无问题

原因分析:

mui-popup是通过以下样式来达到水平和垂直方向居中的

.mui-popup{
    position:fixed;
    width:270px;
    -webkit-transition-duration: 1ms ;
    transition-duration: 1ms;
    -webkit-transform: translate3d(-50%,-50%,0) scale(1);
    transform: translate3d(-50%,-50%,0) scale(1);
    left:50% ;
    top:50%;
}

正常情况下没有问题,键盘弹出时就出问题了

解决方案:

document.addEventListener('DOMContentLoaded',function(){
                        document.addEventListener('focusin',function(){
                    if(mui.os.ios){
                        var popup = document.querySelector('.mui-popup');
                        popup.style.left = '25%';
                    }
                });
                document.addEventListener('focusout',function(){
                    if(mui.os.ios){
                        var popup = document.querySelector('.mui-popup');
                        popup.style.left = '50%';
                    }
                });
            });

遗留问题:

还没仔细研究过软键盘弹起是如何影响水平位置不能居中的,有时间再研究。有研究过的朋友欢迎留言。

你可能感兴趣的:(5+ App上ios版本mui.prompt问题)