我目前正在用温泉UI构建我的第一个科尔多瓦应用程序。到目前为止看起来很有希望!但是我遇到了一个我无法解决的问题,我找不到答案。
我希望这是一个初学者的问题,并且可以通过有更多温泉经验的人轻松解决。
我想要一个滑动菜单,并且仍然是主屏幕上的"通常"导航。
我尝试了两种不同的方法:
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>
结果:无错误消息。但是一旦我从第一个主页导航到另一个页面,我就无法打开滑动菜单。(与 github 存储库中名为 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">
<ons-navigator animation="slide" var="app.navi">
<ons-page ng-controller="BooksCtrl">
// Navigation in controller:
app.navi.pushPage("new_action.html", {
animation: "lift"
});
</ons-page>
</ons-navigator>
</ons-template>
同上:http://codepen.io/argelius/pen/ogXGeV因此,导航元素被移动到第一个主页。结果:我可以浏览应用程序(通过控制器中的 pushPage),并且可以从每个页面打开菜单。但是一旦我单击菜单中的链接,任何 pushPage 调用都会导致错误消息:
Uncaught TypeError: Cannot read property '$$phase' of null
Uncaught Error: Fail to fire "pageinit" event. Attach "ons-page" element to the document after initialization.
有什么想法吗?
提前谢谢你
尝试将<ons-sliding-menu>
放在索引中.html。例如,如果你是你的索引将具有以下整个正文:
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="false" swipe-target-width="50">
</ons-sliding-menu>
然后在您的页面 1 上.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>
最后,如果你想要任何尾迹页面。使用导航器转到结束页面。V页2.html-V
<ons-navigator var="app.navi">
<ons-list-item class="menu-item" ng-click="app.navi.pushPage("new_action.html", {
animation: "lift"
})">
Continue last story
</ons-list-item>
<ons-navigator>
返回。只需使用ng-click="app.navi.popPage()"
但就像DTFagus所说的那样。使用导航器更适合结束页面。