在 SplitApp 中导航到具有动画的相同细节视图

Question

我正在使用一个拆分应用程序，它有

1. 主列表
2. 3 个详细信息页面

MAster List 显示项目列表（例如，自行车和汽车列表）

这些是 3 个详细信息页面：

1. 消息页面：在主列表上没有点击任何内容时的未找到/欢迎页面。
2. BikeProperties 页面：如果单击 Bike，则会显示详细信息。
3. CarProperties 页面：显示是否点击了 Car。

现在，问题是当我点击汽车产品时，会显示一个动画，从欢迎页面导航到汽车页面。

但是，如果我再次点击汽车产品，绑定会更新，没有动画。

同样，如果此时我选择了一辆自行车（在选择汽车之后），导航会出现动画。

总之，

1. 如果在详细页面中再次显示同一页面，则不会显示动画。
2. 加载不同的详细信息页面时会显示动画。

但是，我想要的是，无论当前显示哪个详细信息页面，导航都应该通过动画再次发生，以保持与动画的一致性。

另外，请注意，我不能使用基于哈希的路由，因为这个拆分应用需要显示在对话框中。

下面是虚拟代码：

App.view.xml

<mvc:View controllerName="com.sap.SplitApp.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true"
xmlns="sap.m">
<Shell id="shell">
    <App>
        <SplitApp id="app">
            <masterPages>
                <Page>
                    <List items='{/items}' selectionChange="handleNavigate" mode='SingleSelectMaster'>
                        <items>
                            <StandardListItem title='{name}' info='{type}'/>
                        </items>
                    </List>
                </Page>
            </masterPages>
            <detailPages>
                <MessagePage title='Hello!' text='Select a Product'></MessagePage>
                <core:Fragment fragmentName="com.sap.SplitApp.fragments.BikeProperties" type="XML"/>
                <core:Fragment fragmentName="com.sap.SplitApp.fragments.CarProperties" type="XML"/>
            </detailPages>
        </SplitApp>
    </App>
</Shell>

App.controller.js

onInit: function () {
        var items = [
            {
                name: 'Thunderbird 500cc',
                type:'Bike'
            },
            {
                name: 'Swift',
                type:'Car'
            },
            {
                name: 'Bullet 350cc',
                type:'Bike'
            },
            {
                name: 'Polo',
                type:'Car'
            }
            ];
            var oModel = new sap.ui.model.json.JSONModel({ items: items});
            this.getView().setModel(oModel);
    },

    handleNavigate: function(oEvent) {
        var oBindingContext = oEvent.getParameter("listItem").getBindingContext();
        var oSplitApp = this.byId("app");
        var oDetailPage = null;
        if (oBindingContext.getProperty("type") === "Bike") {
            oDetailPage = this.byId('bikePage');
        } else {
            oDetailPage = this.byId('carPage');
        }
        oDetailPage.setBindingContext(oBindingContext)
         oSplitApp.toDetail(oDetailPage);
    }

BikeProperties.fragment.xml

<core:FragmentDefinition
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
>


<Page id='bikePage' title='Bike'>
        <Title text='{name}' />
    </Page>
</core:FragmentDefinition>

CarProperties.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Page id='carPage' title='Car'>
    <Title text='{name}'/>
</Page>

Answer 1

因此，由于 API 没有提供强制动画的明显方法，因此我查看了源文件。 您的问题可能来自 NavContainer.js 的这一行：

var oFromPage = this.getCurrentPage();
if (oFromPage && (oFromPage.getId() === pageId)) { // cannot navigate to the page that is already current
   Log.warning(this.toString() + ": Cannot navigate to page " + pageId + " because this is the current page.");
   return this;
}

正如您从评论中看到的那样，它并非旨在导航/动画到当前显示的同一页面。

一种可能的解决方案是为汽车和自行车使用第二个片段，如果您之前在 car1 上，则导航到 car2，然后再次导航到 car2，依此类推。这是我找到的最佳解决方法。

以下只是我发现的一些内容，可能值得进一步研究，但我无法使其正常工作。

我在源代码中找到了另一行可以使用但有一个问题。页面标题栏未按预期滑动。正如您在 handleNavigate 函数中添加到控制器中的这个 sn-p 所见，它变得不可见：

var oFromPage = oSplitApp.getCurrentDetailPage();
if (oBindingContext.getProperty("type") === "Bike") {
    oDetailPage = this.byId("bikePage");
    if (oFromPage === oDetailPage) {
        sap.m.NavContainer.transitions.slide.to.call(this, this.byId("carPage"), this.byId("bikePage"), function callback() {});
    }
} else {
    oDetailPage = this.byId("carPage");
    if (oFromPage === oDetailPage) {
        sap.m.NavContainer.transitions.slide.to.call(this, this.byId("bikePage"), this.byId("carPage"), function callback() {});
    }
}

我还注意到 styleClasses 被用于正确的过渡。 fromPage 有一些样式，toPage 也有。但是由于在您的情况下 fromPage 和 toPage 是相同的，因此无法根据需要应用/删除 styleClasses。

oToPage.addStyleClass("sapMNavItemSliding").addStyleClass("sapMNavItemCenter").removeStyleClass("sapMNavItemRight");
oFromPage.addStyleClass("sapMNavItemSliding").removeStyleClass("sapMNavItemCenter").addStyleClass("sapMNavItemLeft");

对您的 detailsPage 仅使用“oFromPrage-styleClasses”会导致从左侧出现某种“弹跳”。一个接一个地使用 all 会导致错误的导航。

也许您可以利用这些信息，但如前所述，使用两个汽车碎片和两个自行车碎片是我发现的最佳解决方案（用户体验方面）。

Answer 2

您是否尝试将动画类型传递给 .toDetailPage() 方法？

https://sapui5.hana.ondemand.com/#/api/sap.m.SplitContainer/methods/toDetail

它在页面 id 之后接受一个 transitionname 参数，我认为这应该可以工作。

来自网站的引述：

"要应用的过渡/动画的类型。这个参数可以省略；那么默认是"slide"（从右边水平移动）。其他选项有："fade", "flip",和“显示”以及任何注册的自定义转换的名称。 目前没有任何标准转换使用任何给定的转换参数。”