Question

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

<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>

Answer 1

只需使用方法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)

请记住在登录后再次刷卡。

Answer 2

我所做的非常简单，我将登录表单放在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

P.S请忽略不需要的样式和脚本，我使用该codepen进行学习。

Answer 3

这对我有用

$(document).on('init', function(event) {
page = event.target; 

 if (page.id === 'page1') {
    document.getElementById('menu').removeAttribute("swipeable")
 }else{
  document.getElementById('menu').setAttribute("swipeable","true")
    }
})

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

3 个答案: