Monaca用溫泉UI打開新頁面

Question

我有以下代碼完成。我在index.html中有<ons-splitter>。

我想用NEW按鈕創建一個新頁面。我已經嘗試過，但預覽中沒有顯示任何操作。

我的代碼如下，請幫幫忙，

<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-item onclick="fn.load('settings.html')" tappable> 
     Settings 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('about.html')" tappable> 
     About 
     </ons-list-item> 
    </ons-list> 
    </ons-page> 
</ons-splitter-side> 
<ons-splitter-content id="content" page="home.html"></ons-splitter-content> 

---

<ons-template id="home.html"> 
    <ons-navigator var="myNavigator"> 
    <ons-page> 
     <ons-toolbar> 
     <div class="left"> 
      <ons-toolbar-button onclick="fn.open()"> 
      <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
     <div class="center"> 
      Main 
     </div> 
     </ons-toolbar> 
     <p style="text-align: left; opacity: 0.6; padding-top: 20px; margin-left: 15px"> 
     Category 
     </p> 
     <ons-list> 
     <ons-list-item tappable>a</ons-list-item> 
     <ons-list-item tappable>b</ons-list-item> 
     <ons-list-item tappable>c</ons-list-item> 
     </ons-list> 
      <ons-button modifier="quiet" onclick="myNavigator.pushPage('page2.html')"> 
       New 
      </ons-button> 
    </ons-page> 
    </ons-navigator> 
    </ons-template> 

Answer 1

您使用的角度？由於您使用的是onclick並且沒有標記，我猜測答案是否定的。

在這種情況下，您遇到的問題可能是Uncaught ReferenceError: myNavigator is not defined。要查看此類問題，可以打開瀏覽器控制檯（ctrl + shift + L或F12 -> Console）。一旦你看到問題解決，它變得更容易。

問題本身意味着你沒有變量myNavigator。這是因爲var屬性僅用於角度。

要解決該問題，您需要這2個步驟：

1. 變化var到id
2. 在你的JavaScript代碼添加var myNavigator = document.getElementById('myNavigator');。

理論上，在某些瀏覽器中，第二部分可能不是必需的，但對於移動設備，最好是編寫它，以便確保一切正常。