美文网首页
html与app对接常见小问题

html与app对接常见小问题

作者: 艳晓 | 来源:发表于2018-07-13 14:38 被阅读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>
    

    相关文章

      网友评论

          本文标题:html与app对接常见小问题

          本文链接:https://www.haomeiwen.com/subject/rtijpftx.html