微信小程序中bug的：解決頁面使用flex布局在iOS9.X中無法正常渲染的問題

這篇文章主要介紹微信小程序中bug的：解決頁面使用flex布局在iOS9.X中無法正常渲染的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

iOS9.X系統在渲染微信小程序頁面時無法對使用flex布局的列表頁面、文章內容類型頁面進行正常渲染。表現為頁面內容不顯示或者頁面樣式錯亂。

場景一：文章內容頁面樣式錯亂

頁面代碼

<view class='container'>
    <view class='articleTitle'>意外健康險索賠指引</view>
    <view class='somebodyNamed'>尊敬的客戶，您好：</view>
    <view class='articleParagraph'>為及時收到保險賠款，請您認真閱讀以下索賠指引，根據實際情況提供相關材料。</view>
    <view class='articleItem'>一、通用資料：</view>
    <view class='articleParagraph'>1、醫療材料：發票、用藥清單、診斷證明、門診病歷、住院病歷、出院小結、檢查報告、他方已賠付證明（如社保報銷單等）</view>
    <view class='articleParagraph'>2、領款賬戶信息、領款人身份證明（個人提供身份證、單位提供營業執照） 出險人為未成年人，提供監護人身份證、戶口本或出生證明或收養關系證明
    </view>
    <view class='articleParagraph'>3、委托領款：授權委托書、委托方及受托方身份證明</view>
    <view class='articleParagraph'>4、出險人身份證明</view>
    <view class='articleParagraph'>5、事故證明材料：</view>
    <view class='paragraphItem'>a.交通事故：行駛證、駕駛證、交通事故認定書、事故調解書</view>
    <view class='paragraphItem'>b.其他事故證明材料（公安、消防證明、安監證明、法院判決等）</view>
    <view class='articleParagraph'>6、涉及第三方賠償，提供他方賠償明細</view>
    <view class='articleItem'>二、殘疾案件增加：</view>
    <view class='articleParagraph'>按意外險條款或保險合同約定的評殘標準出具的傷殘鑒定報告</view>
    <view class='articleItem'>三、死亡案件增加：</view>
    <view class='articleParagraph'>1、死亡證明、火化證明、戶口注銷證明、尸檢報告</view>
    <view class='articleParagraph'>2、死者受益人（遺產繼承人）人員清單及證明材料（公安部門出具的直系親屬關系證明、遺囑、戶口本、出生證明、結婚證、公證證明、其他證明）</view>
    <view class='articleItem'>四、疾病增加：</view>
    <view class='articleParagraph'>1、等待期出險的，提供歷年保單</view>
    <view class='articleParagraph'>2、歷史病歷</view>
    <view class='articleParagraph'>3、重大疾病索賠，需提供病理檢驗報告及條款約定的其他證明材料</view>
    <view class='articleItem'>五、建筑施工人員團體意外險增加：</view>
    <view class='articleParagraph'>勞動合同、工資表或其它用工證明，工程分包合同及施工合同</view>
    <view class='articleItem'>六、借款人意外險增加：</view>
    <view class='articleParagraph'>借款合同、貸款余額證明等相關資料</view>
    <view class='articleItem'>七、旅游意外險增加：</view>
    <view class='articleParagraph'>旅行社當次出游行程表、機票或車票、護照，財產損失證明、物損清單、相關發票或購置交易記錄、航班延誤證明、登機牌等</view>
    <view class='articleItem'>八、不記名投保每個被保險人均分保額的保單需提供所有被保險人員信息、身份證明、關系證明</view>
    <view class='articleItem'>九、保險人需要的其他證明材料</view>
</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 class='container'>
  <view class='guid-content'>
    <view class='articleTitle'>意外健康險索賠指引</view>
    <view class='somebodyNamed'>尊敬的客戶，您好：</view>
    <view class='articleParagraph'>為及時收到保險賠款，請您認真閱讀以下索賠指引，根據實際情況提供相關材料。</view>
    <view class='articleItem'>一、通用資料：</view>
    <view class='articleParagraph'>1、醫療材料：發票、用藥清單、診斷證明、門診病歷、住院病歷、出院小結、檢查報告、他方已賠付證明（如社保報銷單等）</view>
    <view class='articleParagraph'>2、領款賬戶信息、領款人身份證明（個人提供身份證、單位提供營業執照） 出險人為未成年人，提供監護人身份證、戶口本或出生證明或收養關系證明
    </view>
    <view class='articleParagraph'>3、委托領款：授權委托書、委托方及受托方身份證明</view>
    <view class='articleParagraph'>4、出險人身份證明</view>
    <view class='articleParagraph'>5、事故證明材料：</view>
    <view class='paragraphItem'>a.交通事故：行駛證、駕駛證、交通事故認定書、事故調解書</view>
    <view class='paragraphItem'>b.其他事故證明材料（公安、消防證明、安監證明、法院判決等）</view>
    <view class='articleParagraph'>6、涉及第三方賠償，提供他方賠償明細</view>
    <view class='articleItem'>二、殘疾案件增加：</view>
    <view class='articleParagraph'>按意外險條款或保險合同約定的評殘標準出具的傷殘鑒定報告</view>
    <view class='articleItem'>三、死亡案件增加：</view>
    <view class='articleParagraph'>1、死亡證明、火化證明、戶口注銷證明、尸檢報告</view>
    <view class='articleParagraph'>2、死者受益人（遺產繼承人）人員清單及證明材料（公安部門出具的直系親屬關系證明、遺囑、戶口本、出生證明、結婚證、公證證明、其他證明）</view>
    <view class='articleItem'>四、疾病增加：</view>
    <view class='articleParagraph'>1、等待期出險的，提供歷年保單</view>
    <view class='articleParagraph'>2、歷史病歷</view>
    <view class='articleParagraph'>3、重大疾病索賠，需提供病理檢驗報告及條款約定的其他證明材料</view>
    <view class='articleItem'>五、建筑施工人員團體意外險增加：</view>
    <view class='articleParagraph'>勞動合同、工資表或其它用工證明，工程分包合同及施工合同</view>
    <view class='articleItem'>六、借款人意外險增加：</view>
    <view class='articleParagraph'>借款合同、貸款余額證明等相關資料</view>
    <view class='articleItem'>七、旅游意外險增加：</view>
    <view class='articleParagraph'>旅行社當次出游行程表、機票或車票、護照，財產損失證明、物損清單、相關發票或購置交易記錄、航班延誤證明、登機牌等</view>
    <view class='articleItem'>八、不記名投保每個被保險人均分保額的保單需提供所有被保險人員信息、身份證明、關系證明</view>
    <view class='articleItem'>九、保險人需要的其他證明材料</view>
  </view>
</view>

樣式代碼：

.guid-content{
  display: inline-block;
  width: 91.5%;
}

注意：width依據實際需求設定。

場景二：列表頁內容不顯示

解決方案與場景一相同，在頁面的最頂級父元素下再嵌套一個view來包括住所有其他子元素并把Display設置為block即可，不影響其他子元素的Display設置為flex。

以上是“微信小程序中bug的：解決頁面使用flex布局在iOS9.X中無法正常渲染的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！