type: List

用于定义一个列表, 可以设置列表的宽高位置, 指定列表项的展现方向, 通过绑定的列表数据渲染列表项。 还可以通过firstItem和lastItem来指定列表的头部和尾部样式。

demo

props

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

events

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

items

名称	说明
firstItem	列表的头部插槽，最先展现的子 component
loading	列表的loading状态插槽，展示默认的 loading 效果
lastItem	列表的尾部插槽，最后展现的子 component

组件样例（example）

{
    "type":"List",
    "componentId":"example-list",
    "styles":{
        "direction":"horizontal",
        "width":"900dp",
        "height":"400dp"
    },
    "props":{
        "data":[
            {
                "text":"Text1",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/tl_brie.png",
                "id":"syncRefreshParent_componentId14"
            },
            {
                "text":"Text2",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png",
                "id":"syncRefreshParent_componentId8"
            },
            {
                "text":"Text3",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/tl_gruyere.png",
                "id":"syncRefreshParent_componentId9"
            },
            {
                "text":"Text4",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png",
                "id":"syncRefreshParent_componentId5"
            },
            {
                "text":"Text5",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/tl_gruyere.png",
                "id":"syncRefreshParent_componentId6"
            },
            {
                "text":"Text6",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png",
                "id":"syncRefreshParent_componentId12"
            },
            {
                "text":"Text7",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/tl_gruyere.png",
                "id":"syncRefreshParent_componentId13"
            },
            {
                "text":"Text8",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/tl_gruyere.png",
                "id":"syncRefreshParent_componentId14"
            },
            {
                "text":"Text9",
                "src":"https://d2o906d8ln7ui1.cloudfront.net/images/tl_gruyere.png",
                "id":"syncRefreshParent_componentId15"
            }
        ]
    },
    "items":[
        {
            "type":"Container",
            "styles":{
                "width":"150dp",
                "height":"200dp",
                "background-color":"yellow"
            },
            "items":[
                {
                    "type":"Text",
                    "styles":{
                        "line-spacing":"10dp"
                    },
                    "props":{
                        "text":"${data.text}"
                    }
                },
                {
                    "type":"Image",
                    "componentId":"${data.id}",
                    "styles":{
                        "margin-top":"30dp",
                        "width":"100dp",
                        "height":"100dp"
                    },
                    "props":{
                        "src":"${data.src}"
                    }
                }
            ]
        }
    ]
}