javascript - OnSen UI 滑动菜单未出现

Question

我有一个完整的页面轮播。在最后一个轮播项目上，我有一个按钮可以转到另一个有滑动菜单的页面。但是，滑动菜单不会出现/显示在此页面上。我的代码如下

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

我看到了this option并将滑动菜单保留在导航器之外但没有效果。你能帮我解决这个问题吗？

Answer 1

为了在页面中有一个滑动菜单，您必须为滑动菜单本身创建一个 ons-page 并调用它。只需将“ons-sliding-menu”放入“ons-template”和“on-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 .希望对您有所帮助!