Question

我试图在幻灯片框中构建两个并行应用程序。这意味着当应用程序保持其（单独的）状态和导航历史记录时，用户应该能够使用幻灯片在两个应用程序之间轻松切换。我目前的设置如下所述：

<ion-content>
<ion-slide-box auto-play="false" does-continue="false">
    <ion-slide>
        <ion-nav-view name="main"></ion-nav-view>
    </ion-slide>
    <ion-slide>
        <ion-nav-view name="form"></ion-nav-view>
    </ion-slide>
</ion-slide-box>
</ion-content>

这确保我有两个不同的导航堆栈。但是，我不清楚我应该如何构建我的状态，以便同时显示两个视图。

目前我的设置是：

 $stateProvider.state('app', {
        abstract: true,
        templateUrl: 'views/container.html'
 });

 $stateProvider
    .state('app.main', {
        url: "/main",
        abstract: true,
        views: {
            main: {
                templateUrl: "views/main/main.html",
                controller: 'MainController'
            }
        }
    })
    .state('app.main.list', {
        url: "/list",
        views: {
            menuContent: {
                templateUrl: "views/main/list/list.html",
                controller: 'ListController'
            }
        }
    })
    .state('app.form', {
        url: "/form",
        views: {
            form: {
                templateUrl: "views/form/form.html",
                controller: 'FormController'
            }
        }
    })

但是当我使用它时，我必须添加一个在幻灯片更改时改变状态的函数：

function changeURL($index) {
    if($index==0) {
        $state.go('app.main');
    } else {
        $state.go('app.form');
    }
}

但这会导致我的导航堆栈中出现一些奇怪的行为（当URL更改时，幻灯片框之间出现黑屏）。这个问题可以概括为试图模仿tabs指令与slidebox的行为。如何才能做到这一点？

幻灯片盒内的离子离子导航视图

0 个答案: