- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在使用具有
主列表显示项目列表(这里例如,自行车和汽车列表)
这是 3 个详细信息页面:
现在,问题是当我点击 Car Product 时,会显示一个从欢迎页面导航到汽车页面的动画。
但是,如果我再次点击汽车产品,绑定(bind)会更新,但没有动画。
同样,如果此时我选择了一辆自行车(在选择了汽车之后),导航会以动画形式进行。
总结一下,
但是,我想要的是,无论当前显示的是哪个详细信息页面,导航都应该再次出现动画,从而保持与动画的一致性。
此外,请注意我不能使用基于哈希的路由,因为此拆分应用需要显示在对话框中。
下面是伪代码:
<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>
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);
}
<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>
<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>
最佳答案
因此,由于 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 会导致错误的导航。
也许您可以利用这些信息,但如前所述,使用两个汽车片段和两个自行车片段是我发现的最佳解决方案(用户体验方面)。
关于sapui5 - 在 SplitApp 中使用动画导航到相同的详细信息 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57088802/
我正在使用具有 主列表 3 个详情页 主列表显示项目列表(这里例如,自行车和汽车列表) 这是 3 个详细信息页面: 消息页面:当没有点击主列表时的未找到/欢迎页面。 BikeProperties 页面
最近我使用 shell -> views 和 appContainer -> views 创建了两个 UI5 应用程序。两者都产生相同的输出。我很困惑何时在 UI5 中使用 Shell、App、Con
我是一名优秀的程序员,十分优秀!