OnSen UI 슬라이딩 메뉴가 나타나지 않습니다.

Question

저는 전체 페이지 캐 러셀을 가지고 있습니다. 마지막 회전 목마 항목에는 슬라이딩 메뉴가있는 다른 페이지로 이동하는 버튼이 있습니다. 그러나 슬라이딩 메뉴는이 페이지에 나타나지 않습니다. 내가 this option을보고 네비게이터하지만 효과 외부 슬라이딩 메뉴를 유지

<ons-navigator title="Navigator" var="appNavigator"> 
    <ons-page>  
     <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel"> 
     <ons-carousel-item style="background-color: gray;"> 
      <div class="item-label">GRAY</div> 
     </ons-carousel-item> 
     <ons-carousel-item style="background-color: #085078;"> 
      <div class="item-label">BLUE</div> 
     </ons-carousel-item>   
     <ons-carousel-item style="background-color: #D38312;"> 
      <div class="item-label">ORANGE</div> 
      <ons-button modifier="outline" onclick="appNavigator.pushPage('home',{animation: 'lift'})" id="getStarted">Get Started</ons-button> 
     </ons-carousel-item> 
     <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover> 
     </ons-carousel> 
    </ons-page> 

    <ons-sliding-menu 
        main-page="home" 
        menu-page="menu"  
        side="left" 
        max-slide-distance="250px" 
        swipe-target-width="25px" 
        var="menu"> 
    </ons-sliding-menu> 

    <ons-template id="menu">  
     <ons-list> 
     <ons-list-item modifier="chevron" onclick="menu.setMainPage('home', {closeMenu: true})"> 
      Settings 
     </ons-list-item>  
     </ons-list>  
    </ons-template> 

    <ons-template id="home"> 
    <ons-page> 
     <ons-toolbar> 
     <div class="left"> 
      <ons-toolbar-button onclick="menu.toggleMenu()"> 
       <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
     <div class="center">Welcome</div> 
     </ons-toolbar> 

     <p style="text-align: center; color: #999; padding-top: 100px;">Home Page Contents</p> 
    </ons-page> 
    </ons-template> 

</ons-navigator> 

아래로 내 코드입니다. 제발 도와 줄 수 있어요.

Answer 1

페이지 안에 슬라이딩 메뉴가 있으려면 슬라이딩 메뉴 자체를위한 ons-page를 만들고 호출해야합니다.

<ons-template id="slidingmenu"> 
     <ons-page> 
      <ons-sliding-menu 
         main-page="home" 
         menu-page="menu"  
         side="left" 
         max-slide-distance="250px" 
         swipe-target-width="25px" 
         var="menu"> 
      </ons-sliding-menu> 
     </ons-page> 
    </ons-template> 

물론, 당신이

가 대신 슬라이딩 메뉴 페이지를 호출 : 그냥 '기능 슬라이딩 메뉴'같은 내부 '기능 템플릿'과 '기능 페이지를'넣어 캐 러셀의 버튼에서 최종 "홈"페이지 :

<ons-button modifier="outline" onclick="appNavigator.pushPage('slidingmenu',{animation: 'lift'})" id="getStarted">Get Started</ons-button> 

그리고 당신 만 페이지에 하나 개의 주 요소가 있으므로, 주요 네비게이터 외부 (슬라이딩 메뉴 포함) 템플릿을 넣어 더 좋을 것이다. 작동 중입니다. here. 희망이 도움이됩니다!