Problem mit Splitter und Navigator in OnsenUI

Ich habe einen Navigator und globalen Splitter in meiner App. Mein Navigator schiebt meine erste Seite als tempHome und ich brauche Seitenattribut für Splitter und tempHome, um den Splitter zu verwenden.Problem mit Splitter und Navigator in OnsenUI

<ons-navigator id="myNavigator"> 
    <ons-page> 
    <ons-splitter> 
     <ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable> 
     <ons-page> 
      <ons-list> 
      <ons-list-item tappable> 
       test 
      </ons-list-item> 
      </ons-list> 
     </ons-page> 
     </ons-splitter-side> 
     <ons-splitter-content id="content" page="tempHome"></ons-splitter-content> 
    </ons-splitter> 
    </ons-page> 
</ons-navigator>

so habe ich zweimal tempHome auf der ersten Seite meiner App.

Gibt es Hilfe?

Danke

Quelle

2016-07-29 meisam3322

ich mein Problem lösen, indem diese: http://codepen.io/IliaSky/pen/rePgbp?editors=1010 aber Splitter ist nur Arbeit auf der ersten Seite, ich muss es global verwenden – meisam3322

<ons-navigator id="myNavigator"> 
<ons-page> 
    <ons-splitter> 
     <ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable> 
      <ons-page> 
       <ons-list> 
        <ons-list-item tappable> 
         test 
        </ons-list-item> 
       </ons-list> 
      </ons-page> 
     </ons-splitter-side> 
     <ons-splitter-content id="content" page="tempHome"></ons-splitter-content> 
    </ons-splitter> 
</ons-page>

Quelle

2016-07-29 16:12:20 meisam3322

das ist mein Code über – meisam3322

BTW Sie können den Code als Teil der Frage hinzufügen - dort ist ein Bearbeitungsschaltfläche. Da dein Code für die Frage relevant ist, sollte er dort stehen :). Auch ich vermute, das ist nur ein Kopier-Einfügen-Problem, aber ich sehe nicht, dass Sie das 'ons-navigator'-Tag schließen. –

Hallo. danke für die Antwort. Ich habe vergessen, das Tag zu beenden. Ich habe ein Navigationsend-Tag in meinem Code. – meisam3322

Die codepen which you mentioned zeigt einen Splitter in einem Navigator.

Sowohl der Navigator als auch der Splitter können jedoch Innenseiten enthalten. In Ihrem Fall sollten Sie einfach die Struktur andersherum ändern. Da du das Seitenmenü immer haben willst, bedeutet das nur, dass es außerhalb des Navigators sein sollte.

Sie können den Navigator innerhalb der ons-splitter-content setzen und Sie erhalten das gewünschte Ergebnis.

<ons-splitter> 
    <ons-splitter-side collapse swipeable> 
    // menu content... 
    </ons-splitter-side> 
    <ons-splitter-content> 
     <ons-navigator id="myNavigator" page="home.html"></ons-navigator> 
    </ons-splitter-content> 
</ons-splitter>

Hier ist eine modifizierte Demo.

Nebenbei bemerkt: ich modifiziert nur das Beispiel aus dem codepen, die Sie erwähnt haben, so ist es tatsächlich Winkel verwenden, beachten Sie jedoch tun, dass Winkel für Onsen 2 ist keine erforderlich :)

Quelle

2016-07-30 09:29:12

Ich habe einen modifizierten Codepen zusammengebracht, der die Fähigkeit zeigt, eine Vielzahl von Methoden zu kombinieren, aber immer noch das Menü zur Verfügung hat. https://codepen.io/anon/pen/NALzWZ – Munsterlander

Problem mit Splitter und Navigator in OnsenUI

Antwort

Verwandte Themen