微信小程序中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中无法正常渲染的解决方案的详细内容，更多请关注小潘博客其它相关文章！