Solution to bugs in WeChat applet: Solution to the problem that the page using flex layout cannot be rendered normally in iOS9.X

The content of this article is about the solution to bugs in WeChat applet: the solution that the page cannot be rendered normally in iOS9.X using flex layout. It has certain reference value. Friends in need can refer to it. I hope it helps you.

When rendering the WeChat applet page, the iOS9. The performance is that the page content is not displayed or the page style is disordered.

Scenario 1: The article content page style is disordered

Page code

<view class=&#39;container&#39;>
    <view class=&#39;articleTitle&#39;>意外健康险索赔指引</view>
    <view class=&#39;somebodyNamed&#39;>尊敬的客户，您好：</view>
    <view class=&#39;articleParagraph&#39;>为及时收到保险赔款，请您认真阅读以下索赔指引，根据实际情况提供相关材料。</view>
    <view class=&#39;articleItem&#39;>一、通用资料：</view>
    <view class=&#39;articleParagraph&#39;>1、医疗材料：发票、用药清单、诊断证明、门诊病历、住院病历、出院小结、检查报告、他方已赔付证明（如社保报销单等）</view>
    <view class=&#39;articleParagraph&#39;>2、领款账户信息、领款人身份证明（个人提供身份证、单位提供营业执照） 出险人为未成年人，提供监护人身份证、户口本或出生证明或收养关系证明
    </view>
    <view class=&#39;articleParagraph&#39;>3、委托领款：授权委托书、委托方及受托方身份证明</view>
    <view class=&#39;articleParagraph&#39;>4、出险人身份证明</view>
    <view class=&#39;articleParagraph&#39;>5、事故证明材料：</view>
    <view class=&#39;paragraphItem&#39;>a.交通事故：行驶证、驾驶证、交通事故认定书、事故调解书</view>
    <view class=&#39;paragraphItem&#39;>b.其他事故证明材料（公安、消防证明、安监证明、法院判决等）</view>
    <view class=&#39;articleParagraph&#39;>6、涉及第三方赔偿，提供他方赔偿明细</view>
    <view class=&#39;articleItem&#39;>二、残疾案件增加：</view>
    <view class=&#39;articleParagraph&#39;>按意外险条款或保险合同约定的评残标准出具的伤残鉴定报告</view>
    <view class=&#39;articleItem&#39;>三、死亡案件增加：</view>
    <view class=&#39;articleParagraph&#39;>1、死亡证明、火化证明、户口注销证明、尸检报告</view>
    <view class=&#39;articleParagraph&#39;>2、死者受益人（遗产继承人）人员清单及证明材料（公安部门出具的直系亲属关系证明、遗嘱、户口本、出生证明、结婚证、公证证明、其他证明）</view>
    <view class=&#39;articleItem&#39;>四、疾病增加：</view>
    <view class=&#39;articleParagraph&#39;>1、等待期出险的，提供历年保单</view>
    <view class=&#39;articleParagraph&#39;>2、历史病历</view>
    <view class=&#39;articleParagraph&#39;>3、重大疾病索赔，需提供病理检验报告及条款约定的其他证明材料</view>
    <view class=&#39;articleItem&#39;>五、建筑施工人员团体意外险增加：</view>
    <view class=&#39;articleParagraph&#39;>劳动合同、工资表或其它用工证明，工程分包合同及施工合同</view>
    <view class=&#39;articleItem&#39;>六、借款人意外险增加：</view>
    <view class=&#39;articleParagraph&#39;>借款合同、贷款余额证明等相关资料</view>
    <view class=&#39;articleItem&#39;>七、旅游意外险增加：</view>
    <view class=&#39;articleParagraph&#39;>旅行社当次出游行程表、机票或车票、护照，财产损失证明、物损清单、相关发票或购置交易记录、航班延误证明、登机牌等</view>
    <view class=&#39;articleItem&#39;>八、不记名投保每个被保险人均分保额的保单需提供所有被保险人员信息、身份证明、关系证明</view>
    <view class=&#39;articleItem&#39;>九、保险人需要的其他证明材料</view>
</view>

Style code

.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;
}

Solution: In the class Put another layer of view under the container's view, and set its Display to block. The code is as follows

<view class=&#39;container&#39;>
  <view class=&#39;guid-content&#39;>
    <view class=&#39;articleTitle&#39;>意外健康险索赔指引</view>
    <view class=&#39;somebodyNamed&#39;>尊敬的客户，您好：</view>
    <view class=&#39;articleParagraph&#39;>为及时收到保险赔款，请您认真阅读以下索赔指引，根据实际情况提供相关材料。</view>
    <view class=&#39;articleItem&#39;>一、通用资料：</view>
    <view class=&#39;articleParagraph&#39;>1、医疗材料：发票、用药清单、诊断证明、门诊病历、住院病历、出院小结、检查报告、他方已赔付证明（如社保报销单等）</view>
    <view class=&#39;articleParagraph&#39;>2、领款账户信息、领款人身份证明（个人提供身份证、单位提供营业执照） 出险人为未成年人，提供监护人身份证、户口本或出生证明或收养关系证明
    </view>
    <view class=&#39;articleParagraph&#39;>3、委托领款：授权委托书、委托方及受托方身份证明</view>
    <view class=&#39;articleParagraph&#39;>4、出险人身份证明</view>
    <view class=&#39;articleParagraph&#39;>5、事故证明材料：</view>
    <view class=&#39;paragraphItem&#39;>a.交通事故：行驶证、驾驶证、交通事故认定书、事故调解书</view>
    <view class=&#39;paragraphItem&#39;>b.其他事故证明材料（公安、消防证明、安监证明、法院判决等）</view>
    <view class=&#39;articleParagraph&#39;>6、涉及第三方赔偿，提供他方赔偿明细</view>
    <view class=&#39;articleItem&#39;>二、残疾案件增加：</view>
    <view class=&#39;articleParagraph&#39;>按意外险条款或保险合同约定的评残标准出具的伤残鉴定报告</view>
    <view class=&#39;articleItem&#39;>三、死亡案件增加：</view>
    <view class=&#39;articleParagraph&#39;>1、死亡证明、火化证明、户口注销证明、尸检报告</view>
    <view class=&#39;articleParagraph&#39;>2、死者受益人（遗产继承人）人员清单及证明材料（公安部门出具的直系亲属关系证明、遗嘱、户口本、出生证明、结婚证、公证证明、其他证明）</view>
    <view class=&#39;articleItem&#39;>四、疾病增加：</view>
    <view class=&#39;articleParagraph&#39;>1、等待期出险的，提供历年保单</view>
    <view class=&#39;articleParagraph&#39;>2、历史病历</view>
    <view class=&#39;articleParagraph&#39;>3、重大疾病索赔，需提供病理检验报告及条款约定的其他证明材料</view>
    <view class=&#39;articleItem&#39;>五、建筑施工人员团体意外险增加：</view>
    <view class=&#39;articleParagraph&#39;>劳动合同、工资表或其它用工证明，工程分包合同及施工合同</view>
    <view class=&#39;articleItem&#39;>六、借款人意外险增加：</view>
    <view class=&#39;articleParagraph&#39;>借款合同、贷款余额证明等相关资料</view>
    <view class=&#39;articleItem&#39;>七、旅游意外险增加：</view>
    <view class=&#39;articleParagraph&#39;>旅行社当次出游行程表、机票或车票、护照，财产损失证明、物损清单、相关发票或购置交易记录、航班延误证明、登机牌等</view>
    <view class=&#39;articleItem&#39;>八、不记名投保每个被保险人均分保额的保单需提供所有被保险人员信息、身份证明、关系证明</view>
    <view class=&#39;articleItem&#39;>九、保险人需要的其他证明材料</view>
  </view>
</view>

Style code:

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

Note: width is set according to actual needs.

Scenario 2: The content of the list page is not displayed

The solution is the same as scenario 1. Nest another view under the top-level parent element of the page to include all other child elements and put Display Just set it to block, and the Display of other child elements will not be affected. Set it to flex.

Related recommendations:

WeChat Mini Program realizes the quantity of limited items purchased during shopping (with code)

WeChat Mini Program Example: Implementation The effect of the navigation bar moving with the top tab switching and sliding switching (code)

The above is the detailed content of Solution to bugs in WeChat applet: Solution to the problem that the page using flex layout cannot be rendered normally in iOS9.X. For more information, please follow other related articles on the PHP Chinese website!