- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章iOS新版微信底部工具栏遮挡问题完美解决由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
1、问题描述:
苹果设备(iOS)微信中打开H5页面,从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏,而该工具栏会遮挡住面底部的内容,影响页面的正常使用.
2、原因分析:
造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡.
3、解决方案:
了解了该问题出现的原因,我们也就有了解决办法。首先想到的方案就是控制浏览器的历史记录。由于考虑到安全性问题,浏览器的历史记录不支持删除和修改等操作,只能通过新增或替换的方式来实现对浏览历史的操作,因此可以有以下方案:
(一)方案一:将页面的路由跳转方式更换为 “replace” 方式,原生写法可以使用 window.location.replace() 替代 window.location.href ;vue中可以用this.$router.replace() 替代 this.$router.push().
本以为这样就可以解决该问题,但是经过测试发现该方案也会出现一些弊端:
为了解决第一个问题,想到了第二个方案——监听浏览器返回功能:
(二)方案二:通过history的state来监听浏览器的返回事件,通过js代码来模拟浏览器的页面后退操作,以此来解决无法后退的问题。但是该方案由于代码改动较大且页面间的跳转情况过于繁琐,暂时搁置.
考虑到操作history比较繁琐,转而考虑是否可以通过修改样式来实现兼容:
(三)方案三:使用媒体查询,手动设置两种页面样式,通过判断机型是否为iOS来展示不同的页面样式,将iOS端的底部按钮栏位置预留出来。 但是由于首次进入页面时并无底部栏,且该方案需要判断的iOS机型和版本条件过多,样式的改动也较大,暂时搁置.
进一步分析该问题发生的原因,发现出现遮挡的主要原因是,底部的工具栏是在页面完成渲染之后才渲染的,因此才会出现覆盖原页面的问题,如果能让该工具栏优先于页面渲染,则页面的视口高度就会是浏览器去掉底部工具栏之后的高度,这样就不会出现页面内容被遮挡的问题。想到了这一层面后我有如醍醐灌顶,终于找到可以完美解决的办法了! 。
(四)最终方案:在页面加载之前通过主动添加空的历史记录,触发浏览器的history监听机制,让浏览器先于页面调出底部工具栏,从而解决遮挡问题.
所以我们需要在路由守卫中增加对 window.history 的处理,代码如下:
1
2
3
4
|
router.beforeEach((to, from, next) => {
window.history.replaceState(
null
,
null
, window.localtion.href);
next();
})
|
由于项目使用的是vue,这里只展示vue中的写法,使用其他写法的同学可以类比一下.
这里之所以用replaceState 而不用 pushState ,是因为后者会在浏览器中多增加一条历史数据,这会导致在浏览器后退操作时需要后退两次才可以返回到之前的页面;而使用replaceState 则是替换浏览历史中的上一条记录,用当前页面的地址替换上一条记录,本质上浏览历史是不变的,自此关于iOS端微信的底部工具栏遮挡问题就可以完美解决了.
到此这篇关于iOS新版微信底部工具栏遮挡问题完美解决的文章就介绍到这了,更多相关iOS 微信底部工具栏遮挡内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。
原文链接:https://www.jianshu.com/p/0a93944ed627 。
最后此篇关于iOS新版微信底部工具栏遮挡问题完美解决的文章就讲到这里了,如果你想了解更多关于iOS新版微信底部工具栏遮挡问题完美解决的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
关闭。这个问题是off-topic .它目前不接受答案。 想要改进这个问题? Update the question所以它是on-topic用于堆栈溢出。 关闭 12 年前。 Improve thi
我有一个动态网格,其中的数据功能需要正常工作,这样我才能逐步复制网格中的数据。假设在第 5 行中,我输入 10,则从第 6 行开始的后续行应从 11 开始读取,依此类推。 如果我转到空白的第一行并输入
我有一个关于我的按钮消失的问题 我已经把一个图像作为我的按钮 用这个函数动画 function example_animate(px) { $('#cont
我有一个具有 Facebook 连接和经典用户名/密码登录的网站。目前,如果用户单击 facebook_connect 按钮,系统即可运行。但是,我想将现有帐户链接到 facebook,因为用户可以选
我有一个正在为 iOS 开发的应用程序,该应用程序执行以下操作 加载和设置注释并启动核心定位和缩放到位置。 map 上有很多注释,从数据加载不会花很长时间,但将它们实际渲染到 map 上需要一段时间。
我被推荐使用 Heroku for Ruby on Rails 托管,到目前为止,我认为我真的会喜欢它。只是想知道是否有人可以帮助我找出问题所在。 我按照那里的说明在该网站上创建应用程序,创建并提交
我看过很多关于 SSL 错误的帖子和信息,我自己也偶然发现了一个。 我正在尝试使用 GlobalSign CA BE 证书通过 Android WebView 访问网页,但出现了不可信错误。 对于大多
我想开始使用 OpenGL 3+ 和 4,但我在使用 Glew 时遇到了问题。我试图将 glew32.lib 包含在附加依赖项中,并且我已将库和 .dll 移动到主文件夹中,因此不应该有任何路径问题。
我已经盯着这两个下载页面的源代码看了一段时间,但我似乎找不到问题。 我有两个下载页面,一个 javascript 可以工作,一个没有。 工作:http://justupload.it/v/lfd7不是
我一直在使用 jQuery,只是尝试在单击链接时替换文本字段以及隐藏/显示内容项。它似乎在 IE 中工作得很好,但我似乎无法让它在 FF 中工作。 我的 jQuery: $(function() {
我正在尝试为 NDK 编译套接字库,但出现以下两个错误: error: 'close' was not declared in this scope 和 error: 'min' is not a m
我正在使用 Selenium 浏览器自动化框架测试网站。在测试过程中,我切换到特定的框架,我们将其称为“frame_1”。后来,我在 Select 类中使用了 deselectAll() 方法。不久之
我正在尝试通过 Python 创建到 Heroku PostgreSQL 数据库的连接。我将 Windows10 与 Python 3.6.8 和 PostgreSQL 9.6 一起使用。 我从“ht
我有一个包含 2 列的数据框,我想根据两列之间的比较创建第三列。 所以逻辑是:第 1 列 val = 3,第 2 列 val = 4,因此新列值什么都没有 第 1 列 val = 3,第 2 列 va
我想知道如何调试 iphone 5 中的 css 问题。 我尝试使用 firelite 插件。但是从纵向旋转到横向时,火石占据了整个屏幕。 有没有其他方法可以调试 iphone 5 中的 css 问题
所以我有点难以理解为什么这不起作用。我正在尝试替换我正在处理的示例站点上的类别复选框。我试图让它做以下事情:未选中时以一种方式出现,悬停时以另一种方式出现(选中或未选中)选中时以第三种方式出现(而不是
Javascript CSS 问题: 我正在使用一个文本框来写入一个 div。我使用以下 javascript 获取文本框来执行此操作: function process_input(){
你好,我很难理解 P、NP 和多项式时间缩减的主题。我试过在网上搜索它并问过我的一些 friend ,但我没有得到任何好的答案。 我想问一个关于这个话题的一般性问题: 设 A,B 为 P 中的语言(或
你好,我一直在研究 https://leetcode.com/problems/2-keys-keyboard/并想到了这个动态规划问题。 您从空白页上的“A”开始,完成后得到一个数字 n,页面上应该
我正在使用 Cocoapods 和 KIF 在 Xcode 服务器上运行持续集成。我已经成功地为一个项目设置了它来报告每次提交。我现在正在使用第二个项目并收到错误: Bot Issue: warnin
我是一名优秀的程序员,十分优秀!