在溫泉UI 2

添加新的旋轉木馬項目動態由JavaScript試圖由JavaScript在Onsen UI 2動態地添加新的旋轉木馬項目，但它現在的工作。我使用的代碼如下在溫泉UI 2

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/> 
     <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/> 
     <script src="node_modules/onsenui/js/onsenui.js"></script> 
     <script src="jquery.js"></script> 
    </head> 

    <body> 
     <ons-splitter> 
      <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
       <ons-page> 
        <ons-list> 
         <ons-list-item onclick="fn.load('home.html')" tappable> 
          Home 
         </ons-list-item> 
        </ons-list> 
       </ons-page> 
      </ons-splitter-side> 
      <ons-splitter-content id="content" page="home.html"></ons-splitter-content> 
      <ons-navigator id="myNavigator" page="home.html"></ons-navigator> 
     </ons-splitter> 

     <ons-template id="home.html"> 
      <ons-page id="home"> 
       <ons-toolbar> 
        <div class="left"> 
         <ons-toolbar-button onclick="fn.open()"> 
          <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon> 
         </ons-toolbar-button> 
        </div> 
        <div class="center top-bar-title"></div> 
        <div class="right">     
         <ons-toolbar-button id="addInCarousel"> 
          <ons-icon icon="ion-ios-plus, material:md-plus" size="32px, material:24px"></ons-icon> 
         </ons-toolbar-button> 
        </div> 
       </ons-toolbar> 

       <ons-carousel auto-refresh fullscreen swipeable auto-scroll overscrollable id="itemsCarousel" direction="horizontal"> 
        <ons-carousel-item> 
         <img src="images/01.jpg" style="width: 100%; height: auto;"/>     
        </ons-carousel-item>     
        <ons-carousel-item id="caro2"> 
         <img src="images/02.jpg" style="width: 100%; height: auto;"/> 
        </ons-carousel-item>     
       </ons-carousel> 
      </ons-page> 
     </ons-template> 

     <script> 
      window.fn = {}; 
      window.fn.open = function() { 
       var menu = document.getElementById('menu'); 
       menu.open(); 
      }; 

      window.fn.load = function(page) { 
       var content = document.getElementById('content'); 
       var menu = document.getElementById('menu'); 
       // content.load(page).then(menu.close.bind(menu)); 
       document.querySelector('#myNavigator').pushPage(page); 
       menu.close(); 
      }; 

      ons.ready(function() { 
       var carousel = document.addEventListener('postchange', function(event) { 
        console.log('Changed to ' + event.activeIndex); 
       });  
      }); 

      document.addEventListener("init",function(event) { 
       var page = event.target; 

       if(page.matches('#home')) { 
        // set page header title 
        page.querySelector('ons-toolbar .center').innerHTML = 'Testing App'; 

        // clicking on header add button for adding new carousel item 
        page.querySelector('#addInCarousel').onclick = function() { 
         console.log("In function"); 
         var onsItem= document.createElement('ons-carousel-item');      
         onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';    
         document.getElementById('itemsCarousel').appendChild(onsItem); 
        };   
       } 
      }, false); 
     </script> 
    </body> 
</html>

我使用添加新項目旋轉木馬的代碼如下：

// clicking on header add button for adding new carousel item 
        page.querySelector('#addInCarousel').onclick = function() { 
         console.log("In function"); 
         var onsItem= document.createElement('ons-carousel-item');      
         onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';    
         document.getElementById('itemsCarousel').appendChild(onsItem); 
        };

請指導，我做錯了。任何代碼示例或Web鏈接將不勝感激。

來源

2017-03-10 Vivek

我想通了，因爲使用<附件分動器的內容ID = 「內容」頁面= 「home.html做爲」>和既它是不工作，因爲它們都指向home.html的和主頁初始化兩次，可能是因爲這是不工作的。 – Vivek

所以我怎麼能使用分離器和導航儀在我的應用程序？ – Vivek

您可以將您的<ons-navigator>放入<ons-splitter-content>的內部，並清除<ons-splitter-content>的page屬性。

<ons-splitter-content id="content"> 
    <ons-navigator id="myNavigator" page="home.html"></ons-navigator>  
</ons-splitter-content>

這將解決兩個home.html頁面的初始化。

此外，您應該將document.getElementById("id")方法與page.querySelector("#id")方法切換，因爲稍後將在當前頁面上搜索id。

因此，你的函數應該是這個樣子：

page.querySelector('#addInCarousel').onclick = function() { 
    console.log("In function"); 
    var onsItem= document.createElement('ons-carousel-item');      
    onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';    
    page.querySelector('#itemsCarousel').appendChild(onsItem); 
};

來源

2017-03-13 03:44:30

這是，如何使用分離器和導航儀在同一頁上的答案。 – Vivek

回答

相關問題