Analysez les raisons et les solutions pour que le mini programme masqué ne prenne pas effet

La documentation officielle de WeChat mentionne que caché est une propriété que possèdent tous les composants, mais j'ai trouvé que ce n'est pas le cas dans le codage réel ! ! ! !

Par exemple, la mise en page suivante :

    <view hidden="true" style="display:flex;flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>

Vous constaterez que hidden ne prend pas effet. Après mon expérience, j'ai découvert que l'élément hidden ne prend effet que sur la disposition des blocs, donc le coupable dans ce code qui empêche hidden de prendre effet est display:flex. Supprimez simplement ceci.

Et si je dois utiliser la mise en page flex ?

En fait, la raison pour laquelle je souhaite utiliser hidden ici est simplement pour masquer la mise en page, et display:none peut également être masqué. Ici, vous pouvez utiliser une méthode délicate pour définir dynamiquement l'attribut display. L'exemple est le suivant :

    <view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>

Le hideview ici est une variable dans le js correspondant, qui est défini dynamiquement. par js contrôle.

Postface

hidden Disposition cachée, bien qu'elle soit cachée, elle prend quand même de la place.
display:none Masquer ne prend pas de place.

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!