onsenUI의 스플리터 및 탐색기에 문제가 있습니다

Question

내 응용 프로그램에 탐색기와 글로벌 스플리터가 있습니다. 내 탐색기가 내 첫 번째 페이지를 tempHome으로 푸시합니다. 스플리터를 사용하려면 tempHome에도 페이지 속성을 설정해야합니다.

<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이 있습니다.

도움이 될까요?

는 codepen which you mentioned는 네비게이터 내부 스플리터를 보여줍니다

Answer 1

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

Answer 2

감사드립니다.

그러나 탐색기와 스플리터 모두 내부 페이지를 포함 할 수 있습니다. 따라서 원하는 경우 수행하려는 작업은 구조를 다른 방향으로 변경하는 것입니다. 사이드 메뉴를 항상 갖고 싶기 때문에 탐색기 밖에 있어야한다는 것을 의미합니다.

내비게이터를 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입니다.

(!) 참고 : 난 그냥 당신이 언급 한 codepen의 변형 예, 그래서 실제로 각 사용하고, 그러나 온천 2 각도위한 것이 아닙니다 점에 유의 않는 요구 :