小编DTF*_*gus的帖子

结合Onsen UI滑动菜单和导航

我目前正在使用温泉ui构建我的第一个cordova应用程序.看起来很有前途!但我遇到了一个我无法解决的问题,我找不到答案.

我希望这是一个初学者的问题,可以由具有更多温泉经验的人轻松解决.

我想要一个滑动菜单,仍然是主屏幕上的"通常"导航.

我试过两种不同的方法:

1)

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

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

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

        ...

    </ons-page>
</ons-template>

<ons-template id="page1.html">
 <ons-page ng-controller="BooksCtrl">
      // Navigation in controller:
      app.navi.pushPage("new_action.html", {
            animation: "lift"
        });

  </ons-page>
</ons-template>
Run Code Online (Sandbox Code Playgroud)

结果:没有错误消息.但是一旦我从第一个主页导航到另一个页面,我无法打开滑动菜单.(与github repo中的官方演示相同,名为navigator_sliding-menu)

2)

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


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

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

        ...

    </ons-page>
</ons-template>

<ons-template id="page1.html"> …
Run Code Online (Sandbox Code Playgroud)

onsen-ui

6
推荐指数
1
解决办法
3032
查看次数

标签 统计

onsen-ui ×1