javascript - EnyoJS顶部/底部排列

我正在一个enyo应用程序上工作，该应用程序在页面上有一个topBottom Arranger，应在向下滑动时更改为下一个面板。

我面临的问题是，这些面板没有占据整个屏幕的高度，当我在特定面板上时，我能够看到以前面板的某些部分。我想摆脱这一点，只有一个面板占据整个屏幕。

这是一个小提琴的例子。
http://jsfiddle.net/XhZvE/

（确保在左上角的下拉菜单中将rangerType更改为“ topBottomArranger”）

代码像这样

enyo.kind({
    name: "enyo.sample.MyGridArranger",
    kind: "GridArranger",
    colHeight: "150",
    colWidth: "150"
});

enyo.kind({
    name: "enyo.sample.PanelsSample",
    kind: "FittableRows",
    classes: "enyo-fit",
    components: [
        {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [
            {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [
                {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
                    {kind: "onyx.MenuDecorator", components: [
                        {content:"Arranger"},
                        {name:"arrangerPicker", kind: "onyx.Menu", maxHeight: 360, floating: true, onSelect:"arrangerSelected"}
                    ]},
                    {kind: "onyx.Button", content: "Previous", ontap: "prevPanel"},
                    {kind: "onyx.Button", content: "Next", ontap: "nextPanel"},
                    {kind: "onyx.InputDecorator", style: "width: 60px;", components: [
                        {kind: "onyx.Input", value: 0, onchange: "gotoPanel"}
                    ]},
                    {kind: "onyx.Button", content: "Go", ontap: "gotoPanel"},
                    {kind: "onyx.Button", content: "Add", ontap: "addPanel"},
                    {kind: "onyx.Button", content: "Delete", ontap: "deletePanel"}
                ]}
            ]}
        ]},
        {kind: "Panels", name:"samplePanels", fit:true, realtimeFit: true, classes: "panels-sample-panels enyo-border-box", components: [
            {content:0, style:"background:red;"},
            {content:1, style:"background:orange;"},
            {content:2, style:"background:yellow;"},
            {content:3, style:"background:green;"},
            {content:4, style:"background:blue;"},
            {content:5, style:"background:indigo;"},
            {content:6, style:"background:violet;"}
        ]}
    ],
    panelArrangers: [
        {name: "CardArranger", arrangerKind: "CardArranger"},
        {name: "CardSlideInArranger", arrangerKind: "CardSlideInArranger"},
        {name: "CarouselArranger", arrangerKind: "CarouselArranger", classes: "panels-sample-wide"},
        {name: "CollapsingArranger", arrangerKind: "CollapsingArranger", classes: "panels-sample-collapsible"},
        {name: "LeftRightArranger", arrangerKind: "LeftRightArranger"},
        {name: "TopBottomArranger", arrangerKind: "TopBottomArranger", classes: "panels-sample-topbottom"},
        {name: "SpiralArranger", arrangerKind: "SpiralArranger", classes: "panels-sample-spiral"},
        {name: "GridArranger", arrangerKind: "enyo.sample.MyGridArranger", classes: "panels-sample-grid"},
        {name: "DockRightArranger", arrangerKind: "DockRightArranger", classes: "panels-sample-collapsible"}
    ],
    bgcolors: ["red", "orange", "yellow", "green", "blue", "indigo", "violet"],
    create: function() {
        this.inherited(arguments);
        for (var i=0; i<this.panelArrangers.length; i++) {
            this.$.arrangerPicker.createComponent({content:this.panelArrangers[i].name});
        }
        this.panelCount=this.$.samplePanels.getPanels().length;
    },
    rendered: function() {
        this.inherited(arguments);
    },
    arrangerSelected: function(inSender, inEvent) {
        var sp = this.$.samplePanels;
        var p = this.panelArrangers[inEvent.originator.indexInContainer()-1];
        if (this.currentClass) {
            sp.removeClass(this.currentClass);
        }
        if (p.classes) {
            sp.addClass(p.classes);
            this.currentClass = p.classes;
        }
        sp.setArrangerKind(p.arrangerKind);
        if (enyo.Panels.isScreenNarrow()) {
            this.setIndex(1);
        }
    },
    // panels
    prevPanel: function() {
        this.$.samplePanels.previous();
        this.$.input.setValue(this.$.samplePanels.index);
    },
    nextPanel: function() {
        this.$.samplePanels.next();
        this.$.input.setValue(this.$.samplePanels.index);
    },
    gotoPanel: function() {
        this.$.samplePanels.setIndex(this.$.input.getValue());
    },
    panelCount: 0,
    addPanel: function() {
        var sp = this.$.samplePanels;
        var i = this.panelCount++;
        var p = sp.createComponent({
            style:"background:" + this.bgcolors[i % this.bgcolors.length],
            content:i
        });
        p.render();
        sp.reflow();
        sp.setIndex(i);
    },
    deletePanel: function() {
        var p = this.$.samplePanels.getActive();
        if (p) {
            p.destroy();
        }
    }
});

TIA

最佳答案

margin的TopBottomArranger属性需要设置为0，而不是它是从LeftRightArranger继承的默认值40。我在小提琴中的“编曲”列表的末尾添加了一个实现此目的的自定义编曲：http://jsfiddle.net/aarontam/XhZvE/1/