iOS微信底部工具栏遮挡

微信底部工具栏（< >箭头）遮挡了H5页面底部导航

问题图片：

希望结果：

问题原因：
页面加载完成后，微信浏览器向窗体内推送了一个控制插件，会遮盖页面本身的元素

解决方案：
让底部导航条延时加载显示

<script>setTimeout(_=>{$('.body-footer').show()},100);
</script>

页面代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>@yield('title')</title><link rel="stylesheet" href="css/public.css"/>@yield('pageStyle')
</head>
<body>
<div class="body-content">@yield('content')
</div>
<div class="body-footer"><img class="footer-back" src="导航条底图" alt=""><div class="footer-content mobile_slider"><div class="content-item"><img class="image" src="图标" alt=""><div class="item-text checked">首页</div></div><div class="content-item"><img class="image" src="图标" alt=""><div class="item-text checked">商户信息</div></div><div class="content-item"><img class="image" src="图标" alt=""><div class="item-text checked">交易管理</div></div><div class="content-item"><img class="image" src="图标" alt=""><div class="item-text checked">账户列表</div></div><div class="content-item"><img class="image" src="图标" alt=""><div class="item-text checked">课程管理</div></div></div><div class="footer-popup" data-id="1" id="footer-popup" style="margin-left: 0.2rem"><div class="popup-item"></div><i id="item-icon" style="left: 0.6rem"></i></div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/footer.js"></script>
<script>setTimeout(_=>{$('.body-footer').show()},100);
</script>
@yield('pageJs')
</html>

/*底部导航*/
.body-footer {display:none;position: fixed;bottom: 0;height: 1.69rem;width: 100%;color: #999999;font-size: 0.24rem;line-height: 0.51rem;
}

iOS微信底部工具栏遮挡相关推荐

苹果手机用微信内置浏览器访问页面，如果出现微信底部工具栏遮挡页面的情况
苹果手机用微信内置浏览器访问页面,如果出现底部工具栏遮挡页面的情况,可以用这串代码解决: pushHistory();function pushHistory() {var state1 = {tit ...
有些浏览器底部工具栏遮挡吸底内容解决方案
去掉移动端手机浏览器头部搜索栏和底部工具栏的方法苹果.UC浏览器.QQ浏览器:  <meta name="apple-mobil ...
IOS微信下问题1 底部导航栏导致标签位置偏移
何时出现: 在IOS微信浏览器下,当浏览器内出现跳转产生url历史记录的时候,此栏就会出现导致的问题: 导航栏影响高度计算,此问题很少出现.模拟问题,用户打开一个页面,此时没有历史记录导航栏不存在. ...
Vue3 移动端浏览器底部工具栏挡住部分网页，以及ios网页放大滑动问题。
ios网页放大问题,一般来说点击input框会放大.或者双指缩放.这个非常影响用户体验. 解决方法:在index.html中,添加meta标签. <meta name="viewpor ...
IOS 导航栏返回后首页底部工具栏不见了
基于UITabBarController的底部工具栏,隐藏底部工具栏的方法是: viewController.hidesBottomBarWhenPushed = true 这个方法只能在第二UIVi ...
IOS微信6.7.4输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置
IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦, ...
iOS 微信音视频自动播放原生接口WeixinJSBridge API(一些整理小技巧)
原文链接1:https://www.w3ctech.com/topic/1165 原文链接2:https://www.cnblogs.com/jasonduan/p/5635048.html 做一下整 ...
iOS微信8.0.31更新，带来7个功能
近日,iOS微信更新了8.0.31正式版.经过几天的深入体验,我发现了7个新特性.如果你还没有升级,我们就往下看吧. 功能一:优化编辑按钮微信发图片,发送前可以编辑,底部的编辑按钮变了.新版画笔工具 ...
C#学习笔记：控件的Dock属性使用，工具栏遮挡解决。
#Dock属性说明该属性的用途类似于JAVA中的边框布局.绑定区域类似于东西南北中. Top:顶部,将控件绑定到窗体或页面的顶部,控件跟随顶部移动,一般ToolStrip就是这样的模式 Bottom ...

iOS微信底部工具栏遮挡

微信底部工具栏（< >箭头）遮挡了H5页面底部导航

iOS微信底部工具栏遮挡相关推荐

最新文章

热门文章