type: ScrollView

用于定义一个带滚动条滑动窗口, ScrollView 是一个宽高可伸缩的特殊的 Container。 当包含的内容宽高超出设置的指定值, 就会产生滚动条, 基于指定的滑动方向滑动可以显示隐藏内容。ScrollView 多用于篇幅较长的内容展示。

demo

props

名称	类型	默认值	可选值	必填	描述
direction	string	horizontal	horizontal,vertical	否	列表展现方式，横向列表 horizontal 纵向列表 vertical
enableLoading	string	OFF	ON,OFF	否	是否允许展示 loading 态
noMore	string	OFF	ON,OFF	否	列表是否还能加载更多
scrollbar	boolean	false	-	否	列表是否展示滑动条
vslDisabled	boolean	false	-	否	是否强制禁用列表组件的默认语音响应能力（上一页、下一页、向下滑、向右滑）

events

名称	参数	参数说明	event说明
onScroll	-	-	列表基于滑动指令滑动完成后触发该事件
onScrollToEnd	-	-	列表滑动到底后触发该事件
onLoaded	-	-	组件加载完成后可触发该事件（仅在初次渲染完成时触发一次）

items

名称	说明
loading	列表的 loading 状态插槽，展示 loading 效果

组件样例（example）

{
    "type":"ScrollView",
    "componentId":"example-scrollview",
    "props":{
        "enableLoading": "ON",
        "direction":"vertical"
    },
    "styles": {
        "width":"600dp",
        "height":"500dp"
    },
    "items":[
        {
            "type":"Image",
            "componentId":"ScrollToElement1",
            "styles": {
                "height":"150dp",
                "width":"120dp",
                "margin-top":"50dp",
                "margin-left":"200dp"
            },
            "props":{
                "src":"https://skillstore.cdn.bcebos.com/icon/23/fc7581b7-b505-1f44-ab52-3d9f5e567dfd.png"
            }
        },
        {
            "type":"Image",
            "componentId":"ScrollToElement2",
            "styles":{
                "height":"150dp",
                "width":"120dp",
                "margin-top":"50dp",
                "margin-left":"200dp"
            },
            "props":{
                "src":"https://skillstore.cdn.bcebos.com/icon/23/fc7581b7-b505-1f44-ab52-3d9f5e567dfd.png"
            }
        },
        {
            "type":"Image",
            "componentId":"ScrollToElement3",
            "styles":{
                "height":"150dp",
                "width":"120dp",
                "margin-top":"50dp",
                "margin-left":"200dp"
            },
            "props":{
                "src":"https://dumi-saiya-nj-upload-file-test.bj.bcebos.com/async_upload_image/qatest/permanent/20190911/452c9fdd26a948c098de02e019d65612.jpg"
            }
        },
        {
            "type":"Image",
            "componentId":"ScrollToElement4",
            "styles":{
                "height":"150dp",
                "width":"120dp",
                "margin-top":"50dp",
                "margin-left":"200dp"
            },
            "props":{
                "src":"https://dumi-saiya-nj-upload-file-test.bj.bcebos.com/async_upload_image/qatest/permanent/20190911/452c9fdd26a948c098de02e019d65612.jpg"
            }
        },
        {
            "type":"Text",
            "componentId":"ScrollToElement5",
            "styles":{
                "margin-top":"50dp",
                "margin-left":"180dp"
            },
            "props":{
                "text":"这是对ScrollToElement的介绍"
            }
        }
    ]
}