Solution aux bugs du programme WeChat Mini : Solution au problème selon lequel la page utilisant la mise en page flexible ne peut pas être rendue normalement dans iOS9.X-Développement de mini-programmes-php.cn

Solution aux bugs du programme WeChat Mini : Solution au problème selon lequel la page utilisant la mise en page flexible ne peut pas être rendue normalement dans iOS9.X

不言

Libérer： 2018-08-10 14:50:58

original

4386 Les gens l'ont consulté

Le contenu de cet article concerne la solution aux bugs des mini-programmes WeChat : la solution au problème selon lequel la page ne peut pas être rendue normalement dans iOS9.X en utilisant la mise en page flexible. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. à cela. J'espère que cela vous aidera.

Lors du rendu de la page de l'applet WeChat, le système iOS9.X ne peut pas restituer normalement la page de liste et la page de type de contenu d'article en utilisant la disposition flexible. La performance est que le contenu de la page n'est pas affiché ou que le style de la page est désordonné.

Scénario 1 : Le style de la page du contenu de l'article est désordonné

Code de la page

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

Copier après la connexion

Code de style

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

Copier après la connexion

Solution : placez une autre couche de vue sous la vue de la classe conteneur et définissez son affichage sur bloquer. Le code est le suivant

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

Copier après la connexion

Code de style :

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

Copier après la connexion

Remarque : la largeur est définie en fonction des besoins réels.

Scénario 2 : Le contenu de la page de liste n'est pas affiché

La solution est la même que celle du scénario 1. Imbriquer une autre vue sous l'élément parent de niveau supérieur de la page pour inclure tous les autres éléments enfants et mettre Display Réglez-le simplement sur block, et l'affichage des autres éléments enfants ne sera pas affecté. Réglez-le sur flex.

Recommandations associées :

L'applet WeChat implémente la quantité d'articles limités lors des achats (avec code)

Exemple d'applet WeChat : implémentation Le effet de la barre de navigation qui bouge lorsque l'onglet supérieur est basculé et coulissant (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!