Monaca 使用 Onsen 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');。

理论上，在某些浏览器中，第二部分可能不是必需的，但对于移动设备，最好编写它，以便确保一切正常。