Analysieren Sie die Gründe und Lösungen dafür, dass das versteckte Miniprogramm nicht wirksam wird

In der offiziellen WeChat-Dokumentation wird erwähnt, dass „hidden“ eine Eigenschaft ist, die alle Komponenten haben, aber ich habe festgestellt, dass dies in der tatsächlichen Codierung nicht der Fall ist! ! ! !

Zum Beispiel das folgende Layout:

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

Sie werden feststellen, dass hidden nicht wirksam wird. Nach meinem Experiment habe ich herausgefunden, dass das hidden-Element nur beim Blocklayout wirksam wird. Der Übeltäter in diesem Code, der dazu führt, dass hidden nicht wirksam wird, ist also display:flex. Entfernen Sie das einfach.

Was passiert, wenn ich das flex-Layout verwenden muss?

Tatsächlich möchte ich hidden hier nur verwenden, um dieses Layout auszublenden, und display:none kann auch ausgeblendet werden. Hier können Sie eine knifflige Methode verwenden, um das Attribut display dynamisch festzulegen. Das Beispiel lautet wie folgt:

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

Das hideview ist hier eine Variable im entsprechenden js, die dynamisch festgelegt wird durch js Kontrolle.

Nachwort

hidden Verstecktes Layout, obwohl es versteckt ist, nimmt es dennoch Platz ein.
display:none Ausblenden nimmt keinen Platz ein.

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die Gründe und Lösungen dafür, dass das versteckte Miniprogramm nicht wirksam wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!