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

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

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

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

頁面代碼

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

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

樣式代碼：

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

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

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

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

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