mui 项目 wuziyuce app问题总结

做项目遇到的一些问题，在此记录一下，以后也养成记录问题的习惯

1.登录页面：输入框聚焦，软键盘遮住输入框

解决办法：输入框聚焦的时，将输入框移动到可视范围，调整输入框上面的内容间距

2.打开子页面，返回父页面需重载页面

子页面：

mui.init({
                beforeback:function(){
                    //获得父页面的webview
                    var list = plus.webview.currentWebview().opener();
            　　　　 //触发父页面的自定义事件(refresh),从而进行刷新
                    mui.fire(list, 'refresh');
                    //返回true,继续页面关闭逻辑
                    return true;
                }
            });

父页面：

window.addEventListener('refresh', function(e){//执行刷新
                location.reload();
            });

3.input聚焦，底部导航上升

解决办法分两种情况：

    1、如果input输入框与底部导航在同一页面：

    2、如果input输入框与底部导航在不同页面（会出现闪烁的问题，底部导航闪烁，但目前没找到解决办法）

以下代码在子页面中写入（会闪烁）

var phoneHeight = document.documentElement.clientHeight || document.body.clientHeight;
                window.resize = function(){
                    var resizeHeight  = document.documentElement.clientHeight || document.body.clientHeight;
                    
                    if(resizeHeight - 0 < phoneHeight - 0){
                        //当软键盘弹起，在此处操作
                        console.log("键盘弹起","---");
                        ws.parent().evalJS("document.getElementById('tabBar').style.display='none'");
                        //当前子Webview窗口的样式（）
                        ws.setStyle({bottom: '0px'});
                        
                    }else{
                        //当软键盘收起，在此处操作
                        console.log("键盘收起");
                        console.log("直接执行的函数");
                        //当前子Webview窗口的样式（和子页面在父页面上的bottom保持一致）
                        ws.setStyle({bottom: '50px'});
                        ws.parent().evalJS("document.getElementById('tabBar').style.display='block'");
                        
                    }
                }

以下代码在父页面（底部导航所在的页面）写不会闪烁

var h = document.body.scrollHeight;
            var detailPage = plus.webview.getWebviewById('search/search.html');
            window.οnresize=function(){
                 // mui.fire( 目标窗口的webview , '自定义事件名' ，{参数列表}；）
                if(document.body.scrollHeight<h){
                    $$("#tabBar").hide().css("overflow","hidden");
                    mui.fire(detailPage,'newsId',{//该方法是调用子页面的方法
                      height:phoneHeight
                    });    
                }else{
                    $$("#tabBar").show();
                    mui.fire(detailPage,'newsotherId',{
                      height:phoneHeight
                    });    
                }
            };

4.input autocomplete="off" 移动端不管用解决办法

参照https://www.cnblogs.com/loong-hon/p/10190529.html

方法一：

在不想使用缓存的input中添加 autocomplete="off";

eg: <input type="text" autocomplete="off" name="test" />

 

方法二：

在 input 所在的form标签中添加 autocomplete="off";

eg:

<form action="#" autocomplete="off">

<input type="text" autocomplete="off" name="test" />

</form>

方法三：（我就是采用这种办法解决的，因为对于前两种不管用）

可以在不需要默认填写的input框中设置 autocomplete="new-password"