IOS微信下问题1 底部导航栏导致标签位置偏移

何时出现：

在IOS微信浏览器下，当浏览器内出现跳转产生url历史记录的时候，此栏就会出现

导致的问题：

导航栏影响高度计算，此问题很少出现。模拟问题，用户打开一个页面，此时没有历史记录导航栏不存在。用户进行跳转有历史记录导航栏出现，在此页面正好存在非正常布局流元素（例position:”fixed”）针对底部定位，那ok完蛋，你在IOS偶尔就会看到元素会偏下一个导航栏的高度。

图中我们写的导航栏使用position: “absolute”;bottom: 0定位，1图由于此问题我们的导航栏直接被覆盖。2图为正常状态

解决方式：

1、不产生历史记录让此栏不出现，由于未授权代码无法清除会话历史（session History），也不能禁用回退/前进功能。最快捷的可用方式是使location.replace()方法，提供指定的URL来替换当前的会话历史（session history）。几种常用UI框架的路由库也都有replace的替代方法。（如果不好实现可以在第一个页面产生历史记录也可以避免此问题）解释两点，1用replace替代push指第一个页面到第二个页面push->replace,其他页面不变 2 如何在第一个界面产生历史记录:可以在跳转到第一个页面前再加一个页面，此页面不需要内容直接跳转即可。

2、在高度改变后重新定位。在底部导航栏页面高度会改变，由此可以利用onresize监听页面大小变化，在高度改变后重新设置非正常布局流元素即可解决。


function resizeHeight(e){let resizeTimeout;if (!resizeTimeout) {resizeTimeout = setTimeout(function() {resizeTimeout = null;let navBar = document.getElementsByClassName("component-tab-bar-box")[0]; //此类即为非正常布局流元素  请使用你出现问题的元素navBar.style.position = "fixed"; //可不加let bottom = navBar.style.bottom;navBar.style.bottom = parseInt(bottom) ? 0 : 1 + 'px';}, 200);  //此处200ms只做参考，如还出现问题可增加时间延迟}
}
window.onresize = resizeHeight;

IOS微信下问题1 底部导航栏导致标签位置偏移相关推荐

微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
微信小程序添加底部导航栏
我们平时上微信可以看到,微信的底部是4个导航栏选项进行切换的,我们自己开发小程序时,如果要添加像微信那样的底部导航栏的话,其实实现方式非常简单,便捷. 在微信小程序开发IDE中,我们新建一个小程序项目 ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
你会微信小程序自定义底部导航栏吗？
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
ios底部栏设计规范_设计干货：底部导航栏规范设计总结
本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...
Android学习之BottomNavigationBar实现Android特色底部导航栏
Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Googl ...
微信小程序ios滑动问题（滑动卡顿，下拉拖动自定义导航栏）
微信小程序ios滑动问题(滑动卡顿,下拉拖动自定义导航栏) 1.ios中个别机型类似6s ,对微信自带的scroll-view无法滑动: 解决:在滑动内容区添加css属性,overflow: auto ...

IOS微信下问题1 底部导航栏导致标签位置偏移

IOS微信下问题1 底部导航栏导致标签位置偏移相关推荐

最新文章

热门文章