Question

这是我的工作滑动菜单没有导航器，在这个阶段它工作正常：

  <ons-sliding-menu 
   main-page = "default.html"
   menu-page = "menu.html"
   side = "left"
   var="menu"
   swipable="true"
   max-slide-distance="80%"
   type="overlay"
   swipeable="false">
  </ons-sliding-menu>


ons-template  id="default.html">
<ons-page id="default">
   <ons-toolbar>
      <div class="left">
         <ons-toolbar-button ng-click="menu.toggleMenu()">
            <img src = "img/icon.png"/>
         </ons-toolbar-button>
      </div>
   </ons-toolbar>
   <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" id = "carousel"></ons-carousel>
</ons-page>
</ons-template>
<ons-template id="menu.html">
   <ons-list id = "list">
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){getPageContent(0);}});
         ">
         Presentation 1 (sqlite)
      </ons-list-item>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){loadPresentation(0);}});
         ">
         Presentation Mysql
      </ons-list-item>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){getPresentation(0);}});
         ">
         <span class="notification">1</span> Test
      </ons-list-item>
   </ons-list>
</ons-template>

现在我想添加一个登录页面，我使用导航器来制作它并对我的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" onclick="LoginNavi.resetToPage('slidingmenu.html')">Log In</ons-button>
        <br><br>
        <ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button>
      </div>

    </ons-page>

  </ons-navigator>   


<ons-template id="slidingmenu.html">
<ons-page>
      <ons-sliding-menu 
         main-page = "default.html"
         menu-page = "menu.html"
         side = "left"
         var="menu"
         swipable="true"
         max-slide-distance="80%"
         type="overlay"
         swipeable="false">
      </ons-sliding-menu>
</ons-template>
</ons-page>

但是，当getPresentation标签栏中的按钮不起作用时，getPresentation不再有效，而getPageContent工作正常并且轮播的行为是意外的（我不能回到前一个元素）。

有关正在发生的事情的任何线索？或者您是否知道使用滑动菜单制作登录页面的其他任何方法？

这里有我的js方法：

function loadPresentation(id) {
   console.log("loadPresentation");
    if (window.XMLHttpRequest) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", urls.getpresentationbyid + id, true);
        xmlhttp.send(


        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = JSON.parse(xmlhttp.responseText);
                console.log("loadPresentation");
                var jsonPerPage = {};
                json.forEach(function(d) {
                    if (!jsonPerPage.hasOwnProperty(d.id_page)) // Checks if page already exists
                        jsonPerPage[d.id_page] = []; //If no creates and initialized as an empty array

                    jsonPerPage[d.id_page].push(d);
                });



                for (var i in jsonPerPage) {



                    var p = document.createElement('p');
                    p.setAttribute('class', "item-label");
                    var pagetitle = document.createElement('h1');
                    pagetitle.innerHTML = jsonPerPage[parseInt(i.toString())][0].pagetitle;
                    var item = document.createElement('ons-carousel-item');
                    document.getElementById("carousel").appendChild(item);

                    p.appendChild(pagetitle);
                    console.log(jsonPerPage[parseInt(i.toString())][0].pagetitle);

                    jsonPerPage[i].forEach(function(element) {
                        var article = document.createElement('article');
                        var arttitle = document.createElement('h2');
                        var text = document.createElement('p');

                        arttitle.innerHTML = element.articletitle;
                        text.innerHTML = element.text;


                        article.appendChild(arttitle);
                        article.appendChild(text);
                        p.appendChild(article);


                    }, this);


                    item.appendChild(p);



                }


            }
        }
    }
}




function getPageContent(idpage){

db.transaction(
    function(transaction){
  transaction.executeSql('SELECT title, text FROM ARTICLE WHERE id_article IN (SELECT id_article FROM CONTENT WHERE id_page ==' +idpage+')' ,[],

   //transaction.executeSql('SELECT title, text FROM ARTICLE WHERE id_page == ' + idpage ,[],
    function(tx,result) {
        for (var i = 0; i<result.rows.length; i++) {
            var art = document.createElement('article');
            var articleid = 'article'+ (i+1);
            art.setAttribute('id', articleid);
            var artTitle  = document.createElement('h2');
            var artText = document.createElement('p');
            artTitle.innerHTML = result.rows.item(i).title;
            artText.innerHTML  = result.rows.item(i).text;
            art.appendChild(artTitle);
            art.appendChild(artText);
            document.getElementById("carousel").appendChild(art);


        };
    },
    function(err){

    });
  });



}

Answer 1

这是一个使用ons-navigator和ons-sliding-menu的工作示例，您可以在其中隐藏滑动菜单的页面。我在显示滑动菜单之前使用它来创建登录页面。

确保你有：

swipeable="false"
滑动菜单位于导航器

导航后，您可以动态地将swipeable设置为true。

<ons-template id="login.html">
             <ons-navigator var="LoginNavi">
                <ons-page id ="login">
                  <div class="login-form">
                      <input id = "email" type="email" class="text-input--underbar" placeholder="Email" ng-model="email">
                      <input id ="password" type="password" class="text-input--underbar" placeholder="Password" ng-model="password">
                      <br><br>
                      <ons-button modifier="large" class="login-button" onclick="login();LoginNavi.resetToPage('default.html');">Log In</ons-button>
                      <br><br>
                      <ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button>
                   </div>
                </ons-page>
             </ons-navigator>
          </ons-template>


<ons-template id="default.html">  
  <ons-page>
     <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" id = "carousel">
     </ons-carousel
  </ons-page>
</ons-template> 


<ons-sliding-menu 
        id ="sliding"
        main-page = "login.html"
        menu-page = "menu.html"
        side = "left"
        var="menu"
        swipeable="false"
        max-slide-distance="80%"
        type="overlay">
 </ons-sliding-menu>

onsen-ui导航仪和滑动菜单

1 个答案: