Lösung für Fehler im WeChat Mini-Programm: Lösung für das Problem, dass die Seite mit Flex-Layout in iOS9.X nicht normal gerendert werden kann

Der Inhalt dieses Artikels befasst sich mit der Lösung von Fehlern in WeChat-Miniprogrammen: Die Lösung für das Problem, dass die Seite in iOS9.X nicht normal gerendert werden kann, hat einen bestimmten Referenzwert dazu. Ich hoffe, es hilft dir.

Beim Rendern der WeChat-Applet-Seite kann das iOS9.X-System die Listenseite und die Artikelinhaltstypseite nicht normal mit dem Flex-Layout rendern. Die Leistung besteht darin, dass der Seiteninhalt nicht angezeigt wird oder der Seitenstil fehlerhaft ist.

Szenario 1: Der Seitenstil des Artikelinhalts ist ungeordnet

Seitencode

<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>

Stilcode

.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ösung: Im Klasse Legen Sie eine weitere Ansichtsebene unter die Ansicht des Containers und setzen Sie deren Anzeige auf „Blockieren“. Der Code lautet wie folgt:

<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>

Stilcode:

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

Hinweis: Die Breite wird entsprechend den tatsächlichen Anforderungen eingestellt.

Szenario 2: Der Inhalt der Listenseite wird nicht angezeigt

Die Lösung ist die gleiche wie in Szenario 1. Verschachteln Sie eine weitere Ansicht unter dem übergeordneten Element der obersten Ebene der Seite, um alle anderen einzuschließen Untergeordnete Elemente und Anzeige Stellen Sie es einfach auf Block ein, und die Anzeige anderer untergeordneter Elemente wird nicht beeinflusst. Stellen Sie es auf Flex ein.

Verwandte Empfehlungen:

WeChat-Applet implementiert die Menge begrenzter Artikel während des Einkaufs (mit Code)

WeChat-Applet-Beispiel: Implementierung Die Auswirkung der Bewegung der Navigationsleiste, wenn die obere Registerkarte umgeschaltet und verschoben wird (Code)

Das obige ist der detaillierte Inhalt vonLösung für Fehler im WeChat Mini-Programm: Lösung für das Problem, dass die Seite mit Flex-Layout in iOS9.X nicht normal gerendert werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!