ios 和 H5 混合开发左滑返回展示高度变化

ios 和 H5 混合开发左滑返回展示高度变化,第1张

ios 和 H5 混合开发左滑返回展示高度变化
我们先来看看这个图的对比;

ios第一次打开正常,切换页面也是正常的,然后通过左滑动返回页面ios的WKWebView高度发生变化,在ios 开发者无法解决这个问题只能让前端自己实现这个优化了;

我的解决方案是在第一次的时候获取文档高度690,左滑后的高度720;这样的对比差就出现了;

第一步记录正确的高度;我这边采用vue开发,所以我这边记录在store中;全局监听路由发生改变就对比一下高度;如果高度确实是比原来搞就添加一个class;

router.beforeEach(async(to, from, next) => {
const H = document.body.clientHeight;
const deviceH = store.getters.deviceH;
if (deviceH !== ‘’ && H > deviceH) {
document.getElementsByTagName(‘html’)[0].className = ‘addPadBottom’;
} else {
store.commit(‘app/SET_DEVICEH’, H);
}
}
.addPadBottom .weui-tabbar{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
}
添加一下这个安全距离就能解决这个问题;可能只有我这边会这样因为我这边采用的是weui的前端框架

文章出处:http://www.blog123.top/show/15

个人博客

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/993549.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存