EnyoJS TopBottom编曲

Question

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

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

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

（确保在左上角的下拉列表中将arrangerType更改为“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

Answer 1

margin的{​​{1}}属性需要设置为0，而不是从TopBottomArranger继承的默认值40。我添加了一个自定义编曲器，将其实现到小提琴中编曲器列表的末尾：http://jsfiddle.net/aarontam/XhZvE/1/