Question

我正在尝试为页面使用多个文件。但是，我也想使用滑动菜单。 I read here要将多个文件与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>

希望它有所帮助！

我如何使用onsen＆amp; amp;的多个html文件使用滑动菜单？

1 个答案: