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>