关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题

在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示；

刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，在chrome浏览器中查看，效果无误

但是呢！！！

当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果；

百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百度；

解决方法如下

其实也很简单，只不过对于我这个小白来说，解决了好半天；

看你的布局

我的布局是内容部分是个盒子，底部tabbar是个单独的盒子，然后外面用大盒子包裹起来的；

<div><div>内容</div><tabbar>导航栏</tabbar></div>

因为我的是用uni-app写的，这里就大致列出一下

在这样的布局下，在内容部分使用伪元素：：after{ }

将伪元素的高度给到和tabbar的高度一致，这样就撑开了整个底部盒子，这样就解决了ios页面tabbar导航栏遮挡的问题！

真的是一次非常好的经验。

关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题相关推荐

H5页面苹果手机点击输入框输入内容时页面自动放大
问题:H5页面苹果手机点击输入框输入内容时,页面会自动放大,导致用户体验不好解决:<meta name="viewport" content="width=dev ...
解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条.会占用页面的高度,如何去解决这个问题呢. 方案一页面跳转时重新定页面的高度,这样处理导航条仍然存在. 方案二使用histor ...
h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条,出现此情况的原因是: 由于底部导航栏是因为出现history记录才出现的.使用replace就没有history记录,解决办法 ...
h5页面苹果手机不兼容普通点击事件
在代码里面写了一个回到顶部的方法,电脑测试和安卓手机测试完全没问题,在苹果手机上面就会出现点击不会跳转到顶部,反而会向下移一点点: 代码如下(js添加节点并添加点击事件): js: if ($('# ...
Android精华篇 - App中原生页面 VS H5页面
现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native App(原生app,后面都用"原生ap ...
APP里引用H5页面时，高度设置引起的底部白边等问题
H5页面在app里的常见问题: 1.当H5页面高度设置为100%,设置背景色时,发现高度有内容撑开,背景色没有铺满整个背景. 2.当H5页面高度设置为100vh,设置背景色时,背景设能铺满,但是上拉时 ...
微信小程序iphone7设备下跳转h5页面失败，h5页面显示白屏，加载报错，其他页面正常显示
如题,遇到了上面这个问题,在小程序的webview中加载了一个h5页面,满足某种条件的时候跳转到到这个h5页面,这个页面处理了一些逻辑,处理完成后会跳转回来这个页面,所以在往这个h5页面跳转的时候也携 ...
苹果状态栏HTML,iphoneX 适配客户端H5页面的方法教程
前言目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重.无论是设计APP还是写前端H5.都是要考虑移动端的兼容性. 由于iphone ...
H5页面调用手机打电话、发短信、传邮件功能
问题背景在h5页面,点击某个按钮或图标时,调起手机打电话.发短信以及传邮件的功能,可以用一个很简单的方法实现解决方法在需要的地方加上标签,点击即可调起相关功能弹窗 <!-- 打电话 --& ...

关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题

关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题相关推荐

最新文章

热门文章