如何在温泉中使用多个 html 文件并使用滑动菜单？

Question

我正在尝试为页面使用多个文件。但是，我也想使用滑动菜单。要在 Onsen 中使用多个文件，您只需删除 <ons-template>。我明白这一点，但我无法使用滑动菜单。这是我的。

<body>    

<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
  <div class="menu">
      <ons-page>
          <ons-list class="menu-list">
            <ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
              <ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
              Today's Meals
            </ons-list-item>

            <ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
              <ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
              Some other Page
            </ons-list-item>
          </ons-list>
      </ons-page>
  </div>
</ons-sliding-menu>


  <ons-page>
    <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Today's Meals</div>
        <div class="right weight">277.4 LBS</div>
      </ons-toolbar>



    <ons-list class="plan-list">
      <ons-list-item modifier="chevron" class="plan">
        <ons-row>
          <ons-col width="80px" class="plan-left">
            <div class="plan-date">7:00 AM</div>
          </ons-col>
          <ons-col width="6px" class="plan-center"></ons-col>
          <ons-col class="plan-right">
            <div class="plan-name">MEAL 1</div>

            <div class="plan-info">
                <ul>
                    <li>2 Chicken Breasts</li>
                    <li>Blueberries</li>
                    <li>Side Salad with Ranch</li>
                </ul>
            </div>
          </ons-col>
        </ons-row>
      </ons-list-item>

      <ons-list-item modifier="chevron" class="plan">
        <ons-row>
          <ons-col width="80px" class="plan-left">
            <div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
          </ons-col>
          <ons-col width="6px" class="plan-center-alt"></ons-col>
          <ons-col class="plan-right">
            <div class="plan-name">MEAL 2</div>

            <div class="plan-info">
                No food recorded yet.
            </div>
          </ons-col>
        </ons-row>
      </ons-list-item>

      <ons-list-item modifier="chevron" class="plan">
        <ons-row>
          <ons-col width="80px" class="plan-left">
            <div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
          </ons-col>
          <ons-col width="6px" class="plan-center"></ons-col>
          <ons-col class="plan-right">
            <div class="plan-name">MEAL 3</div>

            <div class="plan-info">
                No food recorded yet.
            </div>
          </ons-col>
        </ons-row>
      </ons-list-item>

      <ons-list-item modifier="chevron" class="plan">
        <ons-row>
          <ons-col width="80px" class="plan-left">
            <div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
          </ons-col>
          <ons-col width="6px" class="plan-center-alt"></ons-col>
          <ons-col class="plan-right">
            <div class="plan-name">MEAL 4</div>

            <div class="plan-info">
                No food recorded yet.
            </div>
          </ons-col>
        </ons-row>
      </ons-list-item>

    </ons-list>



  </ons-page>


</body>

我没有将它与 cordova 或 phonegap 一起使用。我只是将其用作移动网页的框架。

谢谢！

Answer 1

你只需要像这样用<ons-template>包裹菜单页和主页:

<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>

<ons-template id="menu.html">
    <ons-page>
      ...
    </ons-page>
</ons-template>

<ons-template id="main.html">
    <ons-page>
      ...
    </ons-page>
</ons-template>

希望对您有所帮助！

如何在温泉中使用多个 html 文件并使用滑动菜单？

How do I use multiple html files with onsen & use the sliding menu?

onsen-ui