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

Question

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

1. 主列表
2. 3详细页面

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

这是3个详细信息页面：

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

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

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

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

所以，总结一下，

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

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

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

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

引用自该网站：

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