youyou
youyou
  • 发布:2016-02-24 13:48
  • 更新:2016-02-24 17:37
  • 阅读:2813

mui header 在iOS下出现下移情况

分类:MUI
mui

在键盘弹出的时候,header部分会出现下移。Android下正常。

2016-02-24 13:48 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

排查是否使用的最新版本mui,排查dom结构是否与mui的header,content要求的一致

  • youyou (作者)

    已经确认是最新的mui,Android下面都没问题的,页面单屏上下可以滚动的。复现是先点击最下面的input 在点击上面的input 就会出现

    2016-02-24 16:23

  • youyou (作者)

    在iOS下可以复现

    2016-02-24 16:24

youyou

youyou (作者)

已经确认是最新的mui,Android下面都没问题的,页面单屏上下可以滚动的。复现是先点击最下面的input 在点击上面的input 就会出现

  • DCloud_UNI_FXY

    贴出来dom结构

    2016-02-24 16:45

  • youyou (作者)

    回复 DCloud_UNI_FXY:<!DOCTYPE html>

    <html>


    <head>  
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <style>
    h5 {
    margin: 5px 7px;
    }
    </style>
    </head>

    <body>
    <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">input(输入框)</h1>
    </header>
    <div class="mui-content">
    <div class="mui-content-padded" style="margin: 5px;">
    <h5>默认搜索框:</h5>
    <div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="">
    </div>
    <h5 class="mui-plus-visible">语音输入搜索框:</h5>
    <div class="mui-input-row mui-search mui-plus-visible">
    <input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
    </div>
    <h5>密码框:</h5>
    <div class="mui-input-row mui-password">
    <input type="password" class="mui-input-password">
    </div>
    <form class="mui-input-group">
    <div class="mui-input-row">
    <label>Input</label>
    <input type="text" placeholder="普通输入框">
    </div>
    <div class="mui-input-row">
    <label>Input</label>
    <input type="text" placeholder="普通输入框">
    </div>
    <div class="mui-input-row">
    <label>Input</label>
    <input type="text" placeholder="普通输入框">
    </div>
    <div class="mui-input-row">
    <label>Input</label>
    <input type="text" placeholder="普通输入框">
    </div>
    <div class="mui-input-row">
    <label>Input</label>
    <input type="text" placeholder="普通输入框">
    </div>
    <div class="mui-input-row">
    <label>Input</label>
    <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
    </div>

    <div class="mui-input-row mui-plus-visible">
    <label>Input</label>
    <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
    </div>
    <div class="mui-button-row">
    <button type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
    <button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
    </div>
    </form>
    <div class="mui-input-row" style="margin: 10px 5px;">
    <textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
    </div>
    </div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script>
    mui.init({
    swipeBack: true //启用右滑关闭功能
    });
    //语音识别完成事件
    document.getElementById("search").addEventListener('recognized', function(e) {
    console.log(e.detail.value);
    });
    </script>
    </body>

    </html>

    2016-02-24 16:50

DCloud_UNI_FXY

DCloud_UNI_FXY

经测试,部分情况下是会出现。。
解决方案
把header.mui-bar设置position:static
如果需要他一直在顶部显示两种方案

1.mui-content使用scroll控件

  1. 将header放到一个父webview里边。
  • youyou (作者)

    能给出第一种方案的实现吗,试了下不行啊

    2016-02-24 17:18

  • DCloud_UNI_FXY

    回复 youyou:<header class="mui-bar mui-bar-nav" style="position:static">

    2016-02-24 17:23

  • youyou (作者)

    回复 DCloud_UNI_FXY: mui-content使用scroll控件 这个加上头部还是会移动

    2016-02-24 17:29

DCloud_UNI_FXY

DCloud_UNI_FXY

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <!--标准mui.css-->  
        <link rel="stylesheet" href="css/mui.min.css">  
        <!--App自定义的css-->  
        <style>  
            h5 {  
                margin: 5px 7px;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav" style="position: relative;">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">input(输入框)</h1>  
        </header>  
        <div id="content" class="mui-content mui-fullscreen" style="overflow-y: auto;">  
            <div class="mui-content-padded" style="margin: 5px;">  
                <h5>默认搜索框:</h5>  
                <div class="mui-input-row mui-search">  
                    <input type="search" class="mui-input-clear" placeholder="">  
                </div>  
                <h5 class="mui-plus-visible">语音输入搜索框:</h5>  
                <div class="mui-input-row mui-search mui-plus-visible">  
                    <input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">  
                </div>  
                <h5>密码框:</h5>  
                <div class="mui-input-row mui-password">  
                    <input type="password" class="mui-input-password">  
                </div>  
                <form class="mui-input-group">  
                    <div class="mui-input-row">  
                        <label>Input</label>  
                        <input type="text" placeholder="普通输入框">  
                    </div>  
                    <div class="mui-input-row">  
                        <label>Input</label>  
                        <input type="text" placeholder="普通输入框">  
                    </div>  
                    <div class="mui-input-row">  
                        <label>Input</label>  
                        <input type="text" placeholder="普通输入框">  
                    </div>  
                    <div class="mui-input-row">  
                        <label>Input</label>  
                        <input type="text" placeholder="普通输入框">  
                    </div>  
                    <div class="mui-input-row">  
                        <label>Input</label>  
                        <input type="text" placeholder="普通输入框">  
                    </div>  
                    <div class="mui-input-row">  
                        <label>Input</label>  
                        <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">  
                    </div>  

                    <div class="mui-input-row mui-plus-visible">  
                        <label>Input</label>  
                        <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">  
                    </div>  
                    <div class="mui-button-row">  
                        <button type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;  
                        <button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>  
                    </div>  
                </form>  
                <div class="mui-input-row" style="margin: 10px 5px;">  
                    <textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>  
                </div>  
            </div>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script>  
            mui.init({  
                swipeBack: true //启用右滑关闭功能  
            });  
            //语音识别完成事件  
            document.getElementById("search").addEventListener('recognized', function(e) {  
                console.log(e.detail.value);  
            });  
        </script>  
    </body>  

</html>

该问题目前已经被锁定, 无法添加新回复