2016-07-29 3 views
0

У меня есть навигатор и глобальный сплиттер в моем приложении. Мой навигатор подталкивает мою первую страницу как tempHome, и мне нужно установить атрибут страницы для сплиттера, а также tempHome использовать разделитель.проблема с разветвителем и навигатором в 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> 

поэтому у меня есть два раза tempHome на первой странице моего приложения.

Есть ли помощь?

Спасибо

+0

Я решить мою проблему следующим образом: http://codepen.io/IliaSky/pen/rePgbp?editors=1010, но сплиттер работает только на первой странице, мне нужно использовать его по всему миру – meisam3322

ответ

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

+0

это мой код выше – meisam3322

+0

Кстати, вы можете добавить код как часть вопроса - там это кнопка редактирования. Поскольку ваш код имеет отношение к вопросу, он должен быть помещен туда :). Также я предполагаю, что это просто проблема с копированием, но я не вижу, чтобы вы закрывали тег 'ons-navigator'. –

+0

привет. Спасибо за ответ. я забыл закончить тег. У меня есть код конца навигатора в моем коде. – meisam3322

3

codepen which you mentioned показывает разветвитель внутри навигатора.

Однако как навигатор, так и сплиттер могут содержать внутренние страницы, поэтому в вашем случае то, что вы хотите сделать, это просто изменить структуру в обратном порядке. Поскольку вы хотите всегда иметь боковое меню, это означает, что он должен находиться вне навигатора.

Вы можете поместить навигатор внутри ons-splitter-content, и вы получите желаемый результат.

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

Внесено изменение Demo.

Sidenote: Я просто изменил пример из codepen, который вы упомянули, так что на самом деле с помощью углового, однако не отметить, что для онсэна 2 углового не требуется :)

+0

Я бросил вместе модифицированный кодекс, который показывает возможность комбинировать различные методы, но все же имеет доступное меню. https://codepen.io/anon/pen/NALzWZ – Munsterlander