如何在纵向视图中自动隐藏左侧滑块？

Question

在我的应用程序中，我有两个滑块（左 30%/右 70%）；当用户旋转平板电脑时，我想在纵向视图中隐藏左侧滑块。

是否可以？如果是的话怎么办？

enyo.kind({
    name: "dashboard",
    kind: enyo.VFlexBox,
    style: "background-color:#FFFFFF;",
    components: [

        {name: "header", kind: "Header", style: "background-color:#BDDEFF; height:57px;", layoutKind: "HFlexLayout", align: "start", components: [
            {kind: "ToolButtonGroup",style: "margin-right: 20px", components: [
                {icon: "images/menu-icon-refresh.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark"},
                ]},

            {kind: "ToolButtonGroup", components: [

                {icon: "images/menu-icon-settings.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark"},
                {icon: "images/menu-icon-edit.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark"},
                {icon: "images/menu-icon-add.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark", onclick: "addtask"},
            ]},

            {name: "vbutton", kind: "Button",style: "width:15%; margin-left: 20px; margin-top: 1px;", caption: "Hide Menu",onclick: "hidemenu"},

            {kind: "VFlexBox",style: "color:#5D5D5D; font-weight:bold;",  flex: 1, align: "center", components: [
                {content: "Business"},
                ]},
            //{content: "Business",className: "enyo-item-secondary" ,style: "color:#5D5D5D; font-weight:bold;"},

            {kind: "ToolButtonGroup", components: [
                {icon: "images/menu-icon-edit.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark",onclick: "edittask"},
                {icon: "images/menu-icon-add.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark",onclick: "addtasklist"},
                ]},

            {name: "title"},
            {name: "description", className: "enyo-item-secondary"}
        ]},
        {name: "slidingPane", kind: "SlidingPane", flex: 1, components: [

                    {name: "left", dismissible: true, onHide: "rightHide", onShow: "rightShow", onResize: "slidingResize", width: "250px", kind:"SlidingView", components: [

Menu/List
]},



            {name: "right",flex: 1, dismissible: false, onResize: "slidingResize",kind:"SlidingView", components: [

Menu related content

]},

],
});

Answer 1

首先将其添加到您的组件中：

{kind: "ApplicationEvents", onWindowRotated: "windowRotated"}

当窗口旋转时，将调用以下函数：

windowRotated: function(inSender) {
  if(enyo.getWindowOrientation() == "up"){
     this.$.left.setShowing(false);
  }
  else if(enyo.getWindowOrientation() == "left" OR enyo.getWindowOrientation() == "right"){
     this.$.left.setShowing(true);
  }

}