在移动纵向模式下打开ons-split-view页面的左侧导航作为主页面

Question

我正在使用Onsen UI Split View页面。在“风景模式”中，每件事都完美无缺。我希望在移动设备“纵向模式”中打开ons-split-view页面，然后左导航作为主页面工作，当我们点击任何链接时，打开另一个页面，顶部有后退按钮，返回左侧导航页面。 / p>

Answer 1

实际上你想要做的不是分割视图能够做的事情。

最容易做的事情可能是ons-sliding-menu。实际上，在Onsen 2中，这两个组件已合并为一个名为ons-splitter的新组件。功能可能不是您想要的，但它类似且可能易于使用。

另一种选择可能需要更多努力。你能做的最简单的事情就是写一些符合你想要的css：

@media screen and (orientation:portrait) {
  .onsen-split-view__secondary {
    opacity: 1 !important;
    display: block !important;
    z-index: 2;
    width: 100% !important;
    transition: 0.2s transform ease-in;
  }
  .onsen-split-view__secondary.closed {
    transform: translate(-100%, 0);
  }
}

此外，您还可以在主页面上添加一个按钮，并使其仅以纵向显示。你想要的是，当你点击一个菜单项时，它会从元素中添加closed类，当你点击后退按钮时，它会删除它。

如果你想要，你也可以考虑转移到温泉2，ons-splitter已开启这些类型的东西。