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

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

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

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

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

頁(yè)面代碼

<view class='container'>
    <view class='articleTitle'>意外健康險(xiǎn)索賠指引</view>
    <view class='somebodyNamed'>尊敬的客戶，您好：</view>
    <view class='articleParagraph'>為及時(shí)收到保險(xiǎn)賠款，請(qǐng)您認(rèn)真閱讀以下索賠指引，根據(jù)實(shí)際情況提供相關(guān)材料。</view>
    <view class='articleItem'>一、通用資料：</view>
    <view class='articleParagraph'>1、醫(yī)療材料：發(fā)票、用藥清單、診斷證明、門(mén)診病歷、住院病歷、出院小結(jié)、檢查報(bào)告、他方已賠付證明（如社保報(bào)銷(xiāo)單等）</view>
    <view class='articleParagraph'>2、領(lǐng)款賬戶信息、領(lǐng)款人身份證明（個(gè)人提供身份證、單位提供營(yíng)業(yè)執(zhí)照） 出險(xiǎn)人為未成年人，提供監(jiān)護(hù)人身份證、戶口本或出生證明或收養(yǎng)關(guān)系證明
    </view>
    <view class='articleParagraph'>3、委托領(lǐng)款：授權(quán)委托書(shū)、委托方及受托方身份證明</view>
    <view class='articleParagraph'>4、出險(xiǎn)人身份證明</view>
    <view class='articleParagraph'>5、事故證明材料：</view>
    <view class='paragraphItem'>a.交通事故：行駛證、駕駛證、交通事故認(rèn)定書(shū)、事故調(diào)解書(shū)</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)合同約定的評(píng)殘標(biāo)準(zhǔn)出具的傷殘鑒定報(bào)告</view>
    <view class='articleItem'>三、死亡案件增加：</view>
    <view class='articleParagraph'>1、死亡證明、火化證明、戶口注銷(xiāo)證明、尸檢報(bào)告</view>
    <view class='articleParagraph'>2、死者受益人（遺產(chǎn)繼承人）人員清單及證明材料（公安部門(mé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ī)票或車(chē)票、護(hù)照，財(cái)產(chǎn)損失證明、物損清單、相關(guān)發(fā)票或購(gòu)置交易記錄、航班延誤證明、登機(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;
}

解決方案：在類(lèi)為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)賠款，請(qǐng)您認(rèn)真閱讀以下索賠指引，根據(jù)實(shí)際情況提供相關(guān)材料。</view>
    <view class='articleItem'>一、通用資料：</view>
    <view class='articleParagraph'>1、醫(yī)療材料：發(fā)票、用藥清單、診斷證明、門(mén)診病歷、住院病歷、出院小結(jié)、檢查報(bào)告、他方已賠付證明（如社保報(bào)銷(xiāo)單等）</view>
    <view class='articleParagraph'>2、領(lǐng)款賬戶信息、領(lǐng)款人身份證明（個(gè)人提供身份證、單位提供營(yíng)業(yè)執(zhí)照） 出險(xiǎn)人為未成年人，提供監(jiān)護(hù)人身份證、戶口本或出生證明或收養(yǎng)關(guān)系證明
    </view>
    <view class='articleParagraph'>3、委托領(lǐng)款：授權(quán)委托書(shū)、委托方及受托方身份證明</view>
    <view class='articleParagraph'>4、出險(xiǎn)人身份證明</view>
    <view class='articleParagraph'>5、事故證明材料：</view>
    <view class='paragraphItem'>a.交通事故：行駛證、駕駛證、交通事故認(rèn)定書(shū)、事故調(diào)解書(shū)</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)合同約定的評(píng)殘標(biāo)準(zhǔn)出具的傷殘鑒定報(bào)告</view>
    <view class='articleItem'>三、死亡案件增加：</view>
    <view class='articleParagraph'>1、死亡證明、火化證明、戶口注銷(xiāo)證明、尸檢報(bào)告</view>
    <view class='articleParagraph'>2、死者受益人（遺產(chǎn)繼承人）人員清單及證明材料（公安部門(mé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ī)票或車(chē)票、護(hù)照，財(cái)產(chǎn)損失證明、物損清單、相關(guān)發(fā)票或購(gòu)置交易記錄、航班延誤證明、登機(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è)定。

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

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

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

分享文章：微信小程序中bug的：解決頁(yè)面使用flex布局在iOS9.X中無(wú)法正常渲染的問(wèn)題
網(wǎng)頁(yè)路徑：http://muchs.cn/article10/gesogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站策劃、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容