Question

我的应用中有导航器和全局分割器。我的导航器将我的第一页作为tempHome推送，我需要为分割器设置页面属性，tempHome也需要使用拆分器。

<ons-navigator id="myNavigator">
  <ons-page>
    <ons-splitter>
      <ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
        <ons-page>
          <ons-list>
            <ons-list-item tappable>
              test
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-splitter-side>
      <ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
    </ons-splitter>
  </ons-page>
</ons-navigator>

所以我在我的应用的第一页有两次tempHome。

有任何帮助吗？

谢谢

Answer 1

codepen which you mentioned在导航器中显示分割器。

然而，导航器和拆分器都可以包含内页 - 因此在您的情况下，您想要做的只是改变结构。因为你希望总是只有侧面菜单才意味着它应该在导航器之外。

您可以将导航器放在ons-splitter-content内，您将获得所需的结果。

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

这是经过修改的Demo。

旁注：我刚刚修改了你提到的codepen中的示例，所以它实际上是使用了角度，但请注意，对于Onsen 2，角度不是必需的：）

Answer 2

<ons-navigator id="myNavigator">
<ons-page>
    <ons-splitter>
        <ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
            <ons-page>
                <ons-list>
                    <ons-list-item tappable>
                        test
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
    </ons-splitter>
</ons-page>

在onsenUI中使用拆分器和导航器时出现问题

2 个答案: