1

我的应用程序中有一个导航器和全局拆分器。我的导航器将我的第一页作为 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 。

有什么帮助吗？

谢谢

4

2 回答 2

4

您提到的codepen在导航器中显示了一个拆分器。

但是，导航器和拆分器都可以包含内页 - 所以在您的情况下，您想要做的只是反过来改变结构。由于您希望始终拥有侧边菜单，这意味着它应该位于导航器之外。

你可以把导航器放在里面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 角度不是必需的:)

于 2016-07-30T09:29:12.160 回答
0 
<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>

于 2016-07-29T16:12:20.750 回答