Скользящее меню пользовательского интерфейса OnSen не появляется

У меня есть карусель на всю страницу. На последнем элементе карусели у меня есть кнопка для перехода на другую страницу, где у меня есть скользящее меню. Однако скользящее меню не появляется/не отображается на этой странице. Мой код, как показано ниже

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

Я видел эту опцию и сохранил скользящее меню вне навигатора, но безрезультатно. Не могли бы вы помочь мне с этим?


cordova javascript onsen-ui
person user2801426    schedule 03.02.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Чтобы иметь скользящее меню внутри страницы, вы должны создать ons-страницу для самого скользящего меню и вызвать его. Просто поместите свое 'on-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>

А шаблоны (включая слайд-меню) лучше вынести за пределы основного навигатора, чтобы у вас был только один основной элемент на странице. Это работает здесь. Надеюсь, поможет!

person Fran Dios    schedule 03.02.2015