禁用onsen-ui滑动菜单登录页面

我刚下载onsen-ui 1.2.1滑动菜单模板。我正在登录页面，但我不想在该页面上滑动菜单。我怎么能这样做？禁用onsen-ui滑动菜单登录页面

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

<ons-template id="login.html"> 
    <ons-page> 
     <ons-toolbar> 
      <div class="left"></div> 
      <div class="center">Log In</div> 
      <div class="right"></div> 
     </ons-toolbar> 
     <div class="login-form"> 
      <img src="res/icon/android/icon-96.png"/> 
      <input type="email" class="text-input--underbar" placeholder="Email" value=""> 
      <input type="password" class="text-input--underbar" placeholder="Kata Sandi" value=""> 
      <br><br> 
      <ons-button modifier="large" class="login-button">Log In</ons-button> 
      <br><br> 
      <ons-button modifier="quiet" class="forgot-password">Lupa kata sandi?</ons-button> 
      <ons-button modifier="quiet" class="forgot-password">Daftar</ons-button> 
     </div> 
    </ons-page> 
    <ons-modal var="modal_loading_login"> 
     <ons-icon icon="ion-loading-c" spin="true" ></ons-icon> 
    </ons-modal> 
</ons-template>

来源

2015-01-07 Surya Wono

见我的答案在这里： [http://stackoverflow.com/questions/26487885/onsen-ui-using-slide-menu-just-for-specifics-pages/29148620#29148620][1] [1]：http://stackoverflow.com/questions/26487885/onsen-ui-using-slide-menu-just-for-specifics-pages/29148620#29148620 –

只需使用方法setSwipeable(swipeable)，使用它，你可以指定菜单应该是滑动式或没有。

例如，假设这是你的温泉滑动菜单声明

<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px"> 
</ons-sliding-menu>

您可以添加块使用

app.slidingMenu.setSwipeable(false)

只是别忘了要后再次滑动式滚动登录。

来源

2015-01-20 00:48:39

这是我需要的，谢谢很多 –

我做的非常简单，我将登录表单放在index.html中，该表单导航到（当单击登录按钮时）first.html，它具有滑动配置。您可以在控制器中添加登录功能，然后在用户名和密码通过身份验证时导航到下一页。

的index.html

<ons-navigator animation="lift" var="LoginNavi"> 
    <ons-page> 
     <ons-toolbar> 
     <div class="center">Log In</div> 
     </ons-toolbar> 

     <div class="login-form"> 

     <input type="email" placeholder="Email" ng-model="email"> 
     <input type="password" placeholder="Password" ng-model="password"> 
     <br><br> 
     <ons-button modifier="large" ng-click="LoginNavi.pushPage('first.html')">Log In</ons-button> 
     <br><br> 
     <ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button> 
     </div> 

    </ons-page> 

    </ons-navigator>

first.html

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

page1.html

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

page2.html

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

menu.html

<ons-template id="menu.html"> 
    <ons-list> 
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})"> 
     page1.html 
    </ons-list-item> 
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', {closeMenu: true})"> 
     page2.html 
    </ons-list-item> 
    </ons-list> 
</ons-template> 


    </body> 
</html>

希望这有助于，这里是一个工作codepen

PS请忽略不需要的样式和脚本，我用codepen学习。

来源

2015-01-20 11:31:56

禁用onsen-ui滑动菜单登录页面

回答

相关问题