scroll
实现:
- Android:RecyclerView
- iOS:UICollectionView
详情:
- 一个单列横滑容器,可承载单类型子模板。具备边距、间距等属性。
属性值:
- edge-insets: 内边距
- 默认值:
{0,0,0,0}
- 默认值:
- item-spacing: 坑位间距
- 默认值:
0
- 默认值:
- direction: 容器方向
- 可取值:
horizontal
vertical
- 默认值:
horizontal
- 可取值:
- item-type: 指定数据使用的坑位类型
{ "data":{ "gaia_template_scroll":{ // 绑定容器数据源 "value":"$nodes", "extend":{ // 指定数据使用的坑位类型 "item-type":{ "path":"$type", // type = h or v "config":{ "h":"'gx-mutable-scroll-item1'", "v":"'gx-mutable-scroll-item2'" } } } } } }
- item-footer-type: 指定加载更多使用的坑位类型
{ "data":{ "template_scroll_load_more": { "value":"$nodes", "extend": { "item-footer-type": { "id": "'template_scroll_load_more_item_load_more'", "hasMore": "$isHasMore" } } } } }
- edge-insets: 内边距
基础用法:
// 定义: { "id": "gaia_template_scroll", "type": "gaia-template", "sub-type": "scroll", "direction": "horizontal", "edge-insets": "{0,18,0,18}", "item-spacing": 7, "row-spacing": 0, "layers": [ { "id": "gaia_template_scroll_item1", "type": "gaia-template", "sub-type": "custom" }, { "id": "gaia_template_scroll_item2", "type": "gaia-template", "sub-type": "custom" } ] }
// 样式: #gaia_template_scroll { width:100%; height:100%; background-color:primaryBackground; ...... }
// 数据: { "data":{ "gaia_template_scroll":{ "value":"$nodes" } } }
// mock数据: { "nodes": [ { "img": "https://t7.baidu.com/it/u=376303577,3502948048&fm=193&f=GIF", "title": "我是标题", "subtitle": "我是副标题", "type": "v" }, { "img": "https://t7.baidu.com/it/u=376303577,3502948048&fm=193&f=GIF", "title": "我是标题", "subtitle": "我是副标题", "type": "h" }, ] }
scrollTo滚动
- 通过databinding的extend配置指定字段,让scroll滚动到指定为止
- 参数说明:
- holding-offset: 重新绑定数据时是否scroll不变化, true/false
- scroll-index: 仅在holding-offset为true时生效,滚动到指定为止
- scroll-position: 仅在holding-offset为true时生效, 滚动后对齐到 center/left/right.
- scroll-animated: 仅在holding-offset为true时生效, 滚动动画,true/false
{
"data":{
"gaia_template_scroll":{
"value":"$nodes",
"extend": {
"holding-offset":true,
"scroll-index": 2,
"scroll-position": "'center'",
"scroll-animated": true
}
}
}
}