容器-滚动控制器

就是超出父级元素宽度出现滚动条

class ScrollerDemo extends eui.Group{
    constructor(){
        super()
    }

    protected createChildren(){
        super.createChildren()

        let group=new eui.Group()
        let image=new eui.Image('resource/assets/bg.jpg')
        group.addChild(image)

        let myScroller=new eui.Scroller()
        myScroller.width=200
        myScroller.height=200
        myScroller.viewport=group
        myScroller.viewport.scrollH=100

        this.addChild(myScroller)
        myScroller.horizontalScrollBar.autoVisibility = false;
        //去掉横向滚动条
        //想要改变滚佛那个条样式，需要自己修改皮肤
    }
}

Popo截图2021226144353.png

// 容器-滚动控制器
// this.addChild(new ScrollerDemo())

只用横向或者只用竖向的组件

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="GoodsUISkin" width="480" height="800" xmlns:e="http://ns.egret.com/eui">
    <e:Scroller id="scrListGoods" height="517" width="20" x="14" y="184">
        <e:viewport>
            <e:List id="listGoods" height="110">
                <e:layout> 
                    <e:VerticalLayout/>
                </e:layout>
            </e:List>
        </e:viewport>
        <e:Skin>
            <e:VScrollBar id="verticalScrollBar" width="8" minHeight="100%" height="100%" right="0">
                <e:Skin>
                    <e:Image id="thumb" width="8" source="hScrollBar02_png"  scale9Grid="1,1,4,4"/>
                </e:Skin>
            </e:VScrollBar>
        </e:Skin>
    </e:Scroller>
</e:Skin>