禁用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滑動菜單登錄頁面

回答

相關問題