html与app对接常见小问题

最新推荐文章于 2021-07-03 18:10:48 发布

原创最新推荐文章于 2021-07-03 18:10:48 发布 · 213 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了解决WebView中加载HTML页面时遇到的问题：一是切换选项时键盘不自动关闭；二是使用过长的select选项导致页面偏移。通过简单的JS代码及调整HTML结构样式，有效地解决了以上两个常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（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>