Question

我正在使用具有以下功能的拆分应用

主列表
3个详细页面

主列表显示项目列表（例如，此处为自行车和汽车列表）

这是3个详细信息页面：

消息页面：当未在主列表上单击任何内容时，找不到/欢迎页面。
BikeProperties页面：如果单击“ Bike”，则会显示详细信息。
汽车属性页：显示是否单击汽车。

现在的问题是，当我单击“汽车产品”时，显示了一个动画，该动画从欢迎页面导航到汽车页面。

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

类似地，如果我此时（在选择汽车之后）选择了“ Bike”，则导航会随动画一起进行。

总而言之，

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

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

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

下面是虚拟代码：

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

您是否尝试过将动画类型传递给.toDetailPage（）方法？

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

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

该网站的报价：

”要应用的过渡/动画的类型。可以省略此参数；然后默认为“ slide”（从右侧水平移动）。其他选项为：“ fade”，“ flip”，和“显示”以及任何已注册的自定义转换的名称。当前没有标准转换使用任何给定的转换参数。”

Answer 2

因此，由于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函数中将以下代码段添加到控制器中，它变得不可见：

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相同，因此无法根据需要应用/删除styleClass。

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

仅将“ oFromPrage-styleClasses”用于您的detailsPage会导致左侧出现某种“弹跳”。一次又一次地使用所有内容，会导致导航错误。

也许您可以利用这些信息，但是正如我已经说过的那样，使用两个汽车碎片和两个自行车碎片是我发现的最佳解决方案（从用户体验的角度来看）。

使用SplitApp中的动画导航到相同的详细信息视图

App.view.xml

App.controller.js

BikeProperties.fragment.xml

CarProperties.fragment.xml

2 个答案: