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

为了在页面内部设置滑动菜单，您必须为滑动菜单本身制作一个页面并调用它。只需将您的＆＃39; ons-sliding-menu＆＃39;内部＆＃39; ons-template＆＃39;和＆＃39; ons-page＆＃39;像这样：

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

当然，你必须把这个滑动菜单页面称为最终的＆＃34; home＆＃34;来自轮播按钮的页面：

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

最好将模板（包括滑动菜单）放在主导航器之外，这样页面中只有一个主要元素。它正在工作here。希望它有所帮助！

OnSen UI滑动菜单未显示

1 个答案: