微信小程序中bug的解决：页面使用flex布局在iOS9.X中无法正常渲染的解决方案

本篇文章给大家带来的内容是关于微信小程序中bug的解决：页面使用flex布局在iOS9.X中无法正常渲染的解决方案，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

ios9.x系统在渲染微信小程序页面时无法对使用flex布局的列表页面、文章内容类型页面进行正常渲染。表现为页面内容不显示或者页面样式错乱。

场景一：文章内容页面样式错乱

页面代码

 view >
样式代码
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
 background-color: #e6eaed;
 overflow-x: hidden;
.articleTitle {
 width: 100%;
 text-align: center;
 font-size: 34rpx;
 /*font-weight: bold;*/
 margin-top: 42rpx;
 margin-bottom: 32rpx;
 font-family: PingFangSC-Medium 
.somebodyNamed {
 font-family: PingFangSC-Regular 
 color: #333;
 line-height: 36rpx;
 font-size: 28rpx;
 width: 100%;
.articleParagraph {
 width: 100%;
 font-size: 28rpx;
 word-break: break-all;
 line-height: 36rpx;
 color: #666;
 font-family: PingFangSC-Regular 
 margin-top: 24rpx;
.articleItem {
 width: 100%;
 font-size: 28rpx;
 /*font-weight: bold;*/
 word-break: break-all;
 margin-top: 40rpx;
 font-family: PingFangSC-Medium 
.paragraphItem {
 width: 91.5%;
 font-size: 28rpx;
 word-break: break-all;
 padding-left: 40rpx;
 font-family: PingFangSC-Regular 
 text-indent: 40rpx;
 color: #666;
}
解决方案：在类为container的view下再套一层view，其Display设置为block即可。代码如下
 view >
样式代码：
.guid-content{
 display: inline-block;
 width: 91.5%;
}
 注意：width依据实际需求设定。
场景二：列表页内容不显示
解决方案与场景一相同，在页面的最顶级父元素下再嵌套一个view来包括住所有其他子元素并把Display设置为block即可，不影响其他子元素的Display设置为flex。
相关推荐：
微信小程序实现购物时限购商品的数量（附代码）
微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码） 
以上就是微信小程序中bug的解决：页面使用flex布局在iOS9.X中无法正常渲染的解决方案的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！