ios底部弹窗滑动_IOS中APP出现屏幕无法滑动解决方案

作者: xteamer成员: shuaiyin

【摘要】首先&＃xff0c;我们的APP一般来说&＃xff0c;页面布局均是顶部和底部的导航栏是固定死的&＃xff0c;因为方便用户的体验性&＃xff0c;中间的内容部分实现滑动。那么这种布局的做法是如何实现的呢&＃xff1f;首先我们最先想到的是flex布局&＃xff0c;即弹性盒子模型。但是&＃xff0c;最近遇到了在iOS中&＃xff0c;出现无法滑动的问题&＃xff0c;仔细的查看了布局&＃xff0c;顶部和底部的导航栏均是使用fixed定位&＃xff0c;就是因为这种布局出现了IOS中屏幕无法滑动的bug。

案例如下&＃xff1a;

由案例可以看出&＃xff0c;顶部和底部的导航栏均使用了fixed固定定位&＃xff0c;但是这种布局可能在android的APP中是没有问题的&＃xff0c;但是在IOS中就是会无法滑动&＃xff0c;谁让我们的IOS那么特殊呢&＃xff1f;是吧。好的&＃xff0c;下面来说一下&＃xff0c;我的解决方案&＃xff1a;

1.首先呢&＃xff0c;我们要把滚动条的位置加在中间的内容部分&＃xff0c;一般来说滚动条的是在从顶部导航栏的未知开始的。所以&＃xff0c;我们的解决方案就是把滚动条的位置加在内容的开始位置&＃xff0c;如图&＃xff1a;

中间的内容部分&＃xff0c;我们加入新的样式&＃xff1a;

flex:1;overflow-y:scroll;

这样的话&＃xff0c;我们就可以通过使用flex布局和fixed固定定位解决了在IOS中APP的屏幕无法滑动的bug&＃xff0c;

由于是第一次解决这样的bug&＃xff0c;可能有所不足&＃xff0c;或许说直接就可以在开发的过程中就避免这种问题&＃xff0c;还是需要继续探索的。欢迎留言评轮&＃xff0c;更好的解决IOS的兼容问题&＃xff0c;或者有更好的解决方案&＃xff0c;欢迎一起探索交流。

欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏&＃xff0c; 必须干货&＃xff01;

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

我们是不一样的技术团队:

&＃xff08;我们认为:所有的企业行为&＃xff0c;都解读为交易行为&＃xff0c;无论是摩拜单车、外卖平台、自动售货机、招聘社区、家政服务&＃xff0c;都用交易的语言来表达&＃xff0c;我们专栏里面有很多实际案例和开发过程和交付流程&＃xff09;

&＃xff08;类似于元素周期表&＃xff0c;我们把交易拆解成元素级别&＃xff0c;根据业务定制组装&＃xff0c;完全复原个性化需求&＃xff0c;我们专栏里面有很学术也很实际的介绍)

(每个项目设置: 导师成长基金、参与人员的奖励&＃xff0c;全员股权池&＃xff0c;创业氛围浓郁&＃xff0c;我们专栏公开分享了我们的一些经验)

(专治各种复杂的业务场景&＃xff0c; 我们通过简洁的元素和分层组合&＃xff0c;来完成复杂场景的业务定制&＃xff0c;我们在这一块有非常多的案例&＃xff0c;在互联网创业专栏里面有详细描述)