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

在寧遠等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都做網(wǎng)站、網(wǎng)站設計 網(wǎng)站設計制作按需網(wǎng)站開發(fā),公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站設計,成都營銷網(wǎng)站建設,成都外貿(mào)網(wǎng)站制作,寧遠網(wǎng)站建設費用合理。

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

場景一：文章內(nèi)容頁面樣式錯亂

頁面代碼

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

樣式代碼

.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即可。代碼如下

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

樣式代碼：

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

注意：width依據(jù)實際需求設定。

場景二：列表頁內(nèi)容不顯示

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

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