如何使用 tabbedslidebox 获得更好的离子性能？

Question

您好，我正在使用 https://github.com/saravmajestic/ionic/tree/master/tabbedSlideBox

它对可滚动标签非常有效，但我发现当我使用多个可滚动标签（超过 4-5 个标签）时，性能会大幅下降。这是因为它试图在开始时为所有选项卡幻灯片框创建视图内容。

我尝试将它与 30 个可滚动选项卡一起使用，显示第一个选项卡大约需要 3-4 秒。

有什么方法可以将视图内容的创建延迟到除焦点选项卡之外的所有其他选项卡的幻灯片更改事件？这样，焦点选项卡可以更快地加载，并且当用户点击选项卡时，其他选项卡视图可以通过微调器显示。

Answer 1

我对 ion-slide-box 也有类似的问题。当我有超过 5-6 张幻灯片时，性能会急剧下降。我花了超过 10 秒来加载幻灯片。

我的解决方案是在任何时候只构建 3 张幻灯片 - 当前幻灯片、下一张和上一张。

我用了这个技巧：将幻灯片的内容包裹在 DIV 中，然后像这样添加 ng-if

<ion-slide-box class="blackBg" on-slide-changed="slideChanged(index)" show-pager="false" active-slide="photoIndex">

        <ion-slide ng-repeat="photo in photos track by $index">

            <div ng-if="$index >= (photoIndex-1) && $index <= (photoIndex+1)">

                 // You slide content here...

            </div>

       </ion-slide>

</ion-slide-box>

如何使用 tabbedslidebox 获得更好的离子性能？

How to get better performance for ionic using tabbedslidebox?

performance

tabbed-interface

ionic-framework

ionic