Возникли проблемы с объединением ons-sliding-menu и ons-tabbar пользовательского интерфейса Onsen

Возникли проблемы с объединением скользящего меню Onsen UI и панели вкладок. Я хочу иметь скользящее меню вверху и панель значков внизу. Я пробовал следующее:

<body>  
  <ons-screen>

    <ons-sliding-menu 
      behind-page="menu.html" 
      above-page="navigator1.html">
    </ons-sliding-menu>

<ons-tabbar>
      <ons-tabbar-item
              active="true"
              label="Home"
              icon="home"
              page="navigator1.html"></ons-tabbar-item>

      <ons-tabbar-item
          label="Camera"
              icon="camera"
              page="page2.html"></ons-tabbar-item>

      <ons-tabbar-item
          label="Settings"
              icon="gear"
              page="page3.html"></ons-tabbar-item>
    </ons-tabbar>

  </ons-screen>

Меню ползунка перестает работать, когда добавляется обе-вкладка.

Есть более сложный пример?


cordova css angularjs onsen-ui topcoat
person user3474461    schedule 29.03.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы должны разделить их на отдельные файлы.

Здесь я помещаю вкладку внутри скользящего меню на странице выше. Вы также можете разместить скользящее меню внутри панели вкладок в зависимости от вашего пользовательского интерфейса.

index.html

<body>
  <ons-screen page="sliding_menu.html"></ons-screen>
</body>

sliding_menu.html

<ons-sliding-menu
  behind-page="menu.html" 
  above-page="tabbar.html">
</ons-sliding-menu>

tabbar.html

<ons-tabbar>
  <ons-tabbar-item
          active="true"
          label="Home"
          icon="home"
          page="navigator1.html"></ons-tabbar-item>

  <ons-tabbar-item
      label="Camera"
          icon="camera"
          page="page2.html"></ons-tabbar-item>

  <ons-tabbar-item
      label="Settings"
          icon="gear"
          page="page3.html"></ons-tabbar-item>
</ons-tabbar>
person Tamura    schedule 31.03.2014