gpt4 book ai didi

javascript - Onsen UI滑动菜单

转载 作者:行者123 更新时间:2023-12-02 16:45:50 27 4
gpt4 key购买 nike

我有一个这样的菜单:

   <ons-navigator animation="slide" var="myNavigator">
<ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.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-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
Home
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>

导航到“link/to/some/other/page.html”后,我有一个 $scope.myNavigator.pushPage('anotherpage', {});

操作。这也有效。但是在执行pushpage操作后,我无法再使用该菜单。我必须先做一个popPage

页面如下所示:

<div ng-controller="someNiceController">
<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">{{title}}</div>
</ons-toolbar>
My nice content
</ons-page>
</div>

我认为我的页面结构有问题...有什么建议吗?

最佳答案

您应该将滑动菜单放在导航器之外。

当您推送时,导航器内的内容将被另一个页面替换,因此当您使用 pushPage() 时,示例中的滑动菜单将消失。

以下代码展示了如何将滑动菜单与导航器一起使用:

<ons-sliding-menu
main-page="main.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>

<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Push</ons-button>
</div>
</ons-navigator>
</ons-template>

<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Pop</ons-button>
</div>
</ons-page>
</ons-template>

<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
Some option
</ons-list-item>
<ons-list-item modifier="tappable">
Another option
</ons-list-item>
</ons-list>
</ons-template>

在这里您可以看到它的实际效果: http://codepen.io/argelius/pen/ogXGeV

关于javascript - Onsen UI滑动菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27122559/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com