Javascript EnyoJS上下排列器

我正在开发一个enyo应用程序，在其中的一个页面上，我有一个上下排列程序，该程序应在向下滑动时切换到下一个面板

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

这里有一个小提琴的例子。

（确保在左上角的下拉列表中将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();
        }
    }
});

enyo.kind({
名称：“enyo.sample.MyGridArranger”，
种类：“GridArranger”，
高度：“150”，
冷宽：“150”
});
恩约({
名称：“enyo.sample.PanelsSample”，
种类：“适合的行”，
课程：“enyo fit”，
组成部分：[
{kind:“FittableColumns”，noStretch:true，class:“onyx工具栏onyx工具栏内联”，组件：[
{种类：“滚动条”，拇指：假，拟合：真，触摸：真，垂直：“隐藏”，样式：“边距：0；”，组件：[
{类：“onyx工具栏内联”，样式：“空白：nowrap；”，组件：[
{种类：“onyx.MenuDecorator”，组成部分：[
{内容：“安排人”}，
{name:“arrangerPicker”，kind:“onyx.Menu”，maxHeight:360，floating:true，onSelect:“arrangerSelected”}
]},
{kind:“onyx.Button”，内容：“Previous”，ontap:“previpanel”}，
{kind:“onyx.Button”，内容：“Next”，ontap:“nextPanel”}，
{种类：“onyx.InputDecorator”，样式：“宽度：60px；”，组件：[
{kind:“onyx.Input”，值：0，onchange:“gotoPanel”}
]},
{kind:“onyx.Button”，内容：“Go”，ontap:“gotoPanel”}，
{kind:“onyx.Button”，内容：“Add”，ontap:“addPanel”}，
{kind:“onyx.Button”，内容：“Delete”，ontap:“deletePanel”}
]}
]}
]},
{kind:“Panels”，name:“samplePanels”，fit:true，realtimeFit:true，class:“Panels-sample-Panels-enyo-border-box”，组件：[
{内容：0，样式：“背景：红色；”}，
{内容：1，样式：“背景：橙色；”}，
{内容：2，样式：“背景：黄色；”}，
{内容：3，样式：“背景：绿色；”}，
{内容：4，样式：“背景：蓝色；”}，
{内容：5，风格：“背景：靛蓝；”}，
{内容：6，风格：“背景：紫色；”}
]}
],
小组安排人：[
{名称：“CardArranger”，arrangerKind:“CardArranger”}，
{名称：“CardSlideInArranger”，ArrangeKind:“CardSlideInArranger”}，
{name:“CarouselArranger”，arrangerKind:“CarouselArranger”，class:“panels sample wide”}，
{name:“ColumingArranger”，arrangerKind:“ColumingArranger”，class:“panels sample Columblable”}，
{名称：“LeftRightArranger”，arrangerKind:“LeftRightArranger”}，
{name:“TopBottomArranger”，arrangerKind:“TopBottomArranger”，class:“panels sample topbottom”}，
{name:“SpiralArranger”，arrangerKind:“SpiralArranger”，class:“panels sample spiral”}，
{name:“GridArranger”，ArrangeKind:“enyo.sample.MyGridArranger”，class:“panels sample grid”}，
{name:“DockRightArranger”，arrangerKind:“DockRightArranger”，class:“面板样本可折叠”}
],
背景颜色：[“红”、“橙”、“黄”、“绿”、“蓝”、“靛”、“紫”]，
创建：函数（）{
这是继承的（论点）；
对于（var i=0；i需要将
TopBottomArranger
的
margin
属性设置为0，而不是从
LeftRightArranger
继承的默认值40。我在fiddle中的arranger列表末尾添加了一个实现此功能的自定义arranger:
您从未保存过您的fiddle，因此链接无法工作！这是updated fiddle link感谢您的回复，它在fiddle中运行良好。我将尝试将其与我的应用程序集成。谢谢：）在我的应用程序中也运行良好：）谢谢。一个简单的问题，我们可以将此处的滑动面板（）转换为垂直面板吗？