sapui5 - 在 SplitApp 中使用动画导航到相同的详细信息 View

Question

我正在使用具有

1. 主列表
2. 3 个详情页

主列表显示项目列表(这里例如，自行车和汽车列表)

这是 3 个详细信息页面:

1. 消息页面:当没有点击主列表时的未找到/欢迎页面。
2. BikeProperties 页面:如果单击 Bike，它会显示详细信息。
3. CarProperties 页面:显示是否单击了汽车。

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

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

同样，如果此时我选择了一辆自行车(在选择了汽车之后)，导航会以动画形式进行。

总结一下，

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

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

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

下面是伪代码:

应用程序 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 函数中将此代码段添加到 Controller 中所看到的:

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");

为您的详细信息页面仅使用“oFromPrage-styleClasses”会导致从左侧出现某种“弹跳”。一个接一个地使用 all 会导致错误的导航。

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