Question

tabs之间的导航是否可以自定义为navcontainer，即在选择标签时，视图应滚动并从左向右更改，就像在navcontainer中使用新页面进行滑动导航一样。

Answer 1

通过将以下CSS添加到您的应用程序

，您可以非常轻松地实现幻灯片的实现

@keyframes slidein {
  from { 
    right: -100%; 
  }
  to {  
    right: -6px; 
  }
}
.sapUiTabPanel {
  overflow:hidden;  
}
.sapUiTabPanel > * { 
  animation: slidein 500ms; 
  position: absolute;  
}

请注意，您可能需要添加带有供应商前缀的CSS，具体取决于您支持的浏览器。

要实现滑出当前显示的选项卡有点棘手，可以实现的一种可能方法是将以下代码添加到某些地方，例如控制器的onInit方法

oTabStrip1.attachBrowserEvent("mousedown",function(oEvent){
  var oTarget = oEvent.target;
  if(oTarget.className==="sapUiTabClose"){
    return;
  }
  var iIdx = oTabStrip1.getItemIndex(oTarget);
  if (iIdx > -1) {
    if ((iIdx !== oTabStrip1.getSelectedIndex()) && (oTabStrip1.getTabs()[iIdx].getEnabled())) {
      oEvent.stopPropagation();
      oEvent.preventDefault();
      jQuery.each(
      oTabStrip1.getTabs()[oTabStrip1.getSelectedIndex()].getContent(),function(i,o){
        var sAnimateLeft = (o.$().innerWidth() * -1) + "px";
        o.$().animate({left:sAnimateLeft},500);
      });
      setTimeout(function(){
        oTabStrip1.selectTabByDomRef(oTarget);
      },250);

    }
  }
});

以上是假设oTabStrip1是您的tabstrip控件的实例。虽然在UI5应用程序中直接修改DOM通常不是一个好习惯，但在这种情况下它可能是安全的，因为显示的选项卡的内容被删除并被点击的选项卡内容替换，所以我们都是这样做会延迟这一点，直到幻灯片动画完成为止。

您可以在http://jsbin.com/vukibi看到一个有效的示例 - 代码是直接从tabstrip example获取的，上面添加了CSS并添加了JS

在openui5中向tabstrip添加自定义转换

1 个答案: