html与app对接常见小问题

2018-07-13  本文已影响37人  艳晓

(1)html网页嵌入app中的情况(使用Webview加载网页)

情景一:进行切换时,键盘不收回的情况

html

<div class ="titlec1-1-1">
        <div class="app_tab active" >本人申请</div>
        <div class="app_tab">非本人申请</div>
        <div class="app_tab">查询或取消</div>
</div>  
js
$(".app_tab").mouseover(function () {
  //实现按钮切换
    var index = $(this).index();
    $(".active").removeClass("active");
    $(this).addClass("active");
  //实现功能切换
    if (index == "0") {
        $("#bryy").show();
        $("#btn").show();
        $("#fbryy").hide();
        $("#cxqx").hide();
    } else if (index == "1") {
        $("#bryy").hide();
        $("#btn").show();
        $("#fbryy").show();
        $("#cxqx").hide();
    } else if (index == "2") {
        $("#bryy").hide();
        $("#btn").hide();
        $("#fbryy").hide();
        $("#cxqx").show();
    }
 //收起键盘
    $("input").blur();
    $("select").blur();        
});
情景二:使用select,选择框中某一项内容过多,选择该项后,再次进行选择,导致整个页面网左侧移动

解决方案:在最外层的div 中添加样式 style ="overflow: hidden; overflow-y: auto;"

<form style ="overflow: hidden; overflow-y: auto;">
<div class="APPc1">
    <div class="APPbg4">
        <div class="h10"></div>
        <div style="clear:both;"></div>
        <div class="h30"></div>
        <div class="titlec1">
            <div class="titlec1-1">
                @*标题切换栏*@
                <div class ="titlec1-1-1">
                    <div class="app_tab active" >本人申请</div>
                    <div class="app_tab">非本人申请</div>
                    <div class="app_tab">查询或取消</div>
                </div>
            </div>
        </div>
        <div class="h30f15">
            <div class="APPc2">
                @*本人申请*@
                <div id="bryy" class="app_yysq_content">
                  
                </div>
                @*非本人申请*@
                <div id="fbryy" class="app_yysq_content display_none">
                                            
                </div>
                @*预约查询或取消*@
                <div id="cxqx" class="app_yysq_contentCX display_none">
                                           
                </div>
            </div>
        </div>
    </div>
</div>   </form>
上一篇下一篇

猜你喜欢

热点阅读