幻灯片中的幻灯片内的离子视图

Posted

技术标签:

【中文标题】幻灯片中的幻灯片内的离子视图【英文标题】:Ion-View inside a slide in a slidebox 【发布时间】:2015-05-12 06:00:39 【问题描述】:

我正在开发一个 Ionic 应用程序,并希望有一个滑块框,每张幻灯片代表一个离子视图。

幻灯片框 -

<ion-view>
<ion-content>
    <div class="row">
        <ion-slide-box class="col" auto-play="false" does-continue="false">
            <ion-slide>
                <ion-nav-view name="view-1" ></ion-nav-view>
            </ion-slide>
            <ion-slide>
                <ion-nav-view name="view-2" ></ion-nav-view>
            </ion-slide>
        </ion-slide-box>
    </div>
</ion-content>
</ion-view>

路线

 .state('parent.view-1', 
            url: "/view1",
            views: 
                "view-1": 
                    templateUrl: "app/parent/view-1.html"
                
            
        )

其中一个视图 - view-1.html -

<ion-view>
    <ion-content>

        <h1>View 1</h1>

    </ion-content>
</ion-view>

问题是 view-1 没有显示在第一张幻灯片中。谁能告诉这里可能是什么问题?另外,这是显示滑动视图的正确方法吗?请建议。我是 Ionic 的初学者。

【问题讨论】:

【参考方案1】:

我正在做一个类似的设置,我发现他的工作不是很整洁。

由于您的 ion slide box 在 ion-view 标签内,我假设这个模板被注入到更高级别的某个地方?

尝试注入:

    <ion-slide-box class="col" auto-play="false" does-continue="false">
        <ion-slide>
            <ion-nav-view name="view-1" ></ion-nav-view>
        </ion-slide>
        <ion-slide>
            <ion-nav-view name="view-2" ></ion-nav-view>
        </ion-slide>
    </ion-slide-box>

在你没有和其他包裹它的东西里面。

【讨论】:

我试过了,但现在父页面本身是空白的。 令人惊讶的是,在使用 ion-tabs 时,同样的布局也适用,但在使用 ions-slides 时却不行。

以上是关于幻灯片中的幻灯片内的离子视图的主要内容,如果未能解决你的问题,请参考以下文章

离子幻灯片样式宽度自动设置

离子副标题栏重叠内容

javascript 离子幻灯片(Swiper) - 例如

如何隐藏离子幻灯片寻呼机?

离子 - 在幻灯片菜单关闭时发生事件

离子幻灯片(ion-slides):到达终点时隐藏寻呼机