机型:小米6、一加3t、华为meta9、小米mix2等Android机型;
微信版本:6.7.3;
触发条件:导航栏样式设置为自定义时(app.json中配置为"navigationStyle": "custom");
bug现象:Android机型中web-view整个页面的高度会被加上小程序的导航栏的高度,导致内嵌页面中底部一部分元素无法显示(页面中若有固定置底的元素会非常明显)
以下截图分别是开发者工具中的调试效果和真机中的实际效果(开发者工具中导航栏与内嵌页面是顶部是重合的,底部正常显示,但是到了真机中,页面的顶部会显示在导航栏下方,页面高度在iOS机型上是正常的,可以看到底部元素能正常显示,而Android机型上就不对了,根本看不到position:fixed的元素):
↑ 开发者工具中,iPhone6的效果
↑ 开发者工具中nexus5的效果
↑ 真机 Android机型中的效果
↑ 真机iPhone7P中的效果
另外,看到有同学很早之前就提了这个bug了,不知道为啥一直没有被重视:
这个有解决办法吗
话说,这个问题影响哪些相关版本?
我们也是碰到了这个问题,不知道有没有解决呀。不行的话,就只能坐等官方兼容了。。。。。。
,文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
问题不是自定义导航栏有没有效果,而是在开启自定义导航栏样式后iOS和Android两种系统上的页面的高度不一致。Android机型上多了导航栏这么一截高度,这个才是问题所在。
详细请看下面截图:
alert的值取的$(window).height();
第一张图片是"navigationStyle": "custom"配置下的窗口高度;
第二张图片则是去掉这条配置后的窗口高度
上面一条回复中的表述可能不太准确,那两张图片都是Android机型下面截取的,分别是在开启自定义导航栏样式和关闭这条配置后这两种情况下的窗口高度。能够很明显的看到,在开启这条配置后高度多了一截,这个时候页面上的内容就有一部分在屏幕底部外面去了
,底部缺失吗?提供下代码片段
额,我昨天就想提供代码片段来着,但是在代码片段中嵌web-view好像不能显示。。。
您可以看我上面的两条回复,开启navigationStyle": "custom"配置之后的页面高度确实不一样的。
代码片段可以嵌web-view是可以的
我觉得这应该是html页面的问题。
html页面用的什么自适应,个人建议通过js动态修改root的font-size。然后使用rem
不是,跟自适应无关。它是整个界面的高度变了,多加了一个导航栏的高度,然后多加的这一部分就显示到屏幕底部外面去了。
emmmmmm。你可以通过手动获取设备信息,把上面那条加个空白(别喷,只是建议)
当我把置底的元素bottom的值给的多一点之后,在Android机型里面也能看到这个按钮,但这时iOS里面就会跑到上面去了。
现在只能通过判断环境和版本来把样式调整一下,但是治标不治本,回头官方啥时候修复了的话还得调整。
我发贴之前搜了下的,有同学9月份的时候就踫到这个问题了,并且贴子下面一堆人在说都有这个问题,但是官方没有回复,还是希望官方能重视一下。
顶部导航栏完全可以做假的,把原生的去掉,然后自己改"navigationStyle": "custom" 了解一下