流式（网格）布局

样式

type 对应类型
container-oneColumn 单列(一排一)
container-twoColumn 双列
container-threeColumn 三列
container-fourColumn 四列
container-fiveColumn 五列
container-flow N列

属性

字段 意义 类型 样例
margin 卡片的外间距，顺序是上右下左 Array(内部是Number或者String)String [9,9,9,9],”[9,9,9,9]”，[“9”,”9”,”9”,”9”]均可，建议使用第一种
padding 卡片的内间距，顺序是上右下左 Array(内部是Number或者String)String [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建议使用第一种
aspectRatio 每一行的宽高比 String “9”
vGap 垂直方向上，每个组件的间距 String/Number “9”
hGap 水平方向上，每个组件的间距 String/Number “9”
bgImgUrl 背景图 String https://gw.alicdn.com/tps/TB1dkjfOXXXXXb0aXXXXXXXXXXX-1125-220.png
bgColor 背景色 String “#FFFFFF”
cols 每列的百分比，如果是N列，可以只写Array中只写N-1项，最后一项会自动填充，如果加一起大于100，就按照填写的来算 Array(String/Number) [“30”,”30”] 或 [30,30]

一拖N布局

  • 左边一个，右边上面一个下面一个
  • 左边一个，右边上面一个下面两个
  • 左边一个，右边上面一个下面三个
type 对应类型
container-onePlusN 一拖2/3/4

浮动布局

type 对应类型
container-float 浮标

固定布局

type 对应类型
container-fix 固定顶部或者底部，根据属性指定
container-scrollFix 滚动固定(滚动到某个布局的时候，出现并固定)

吸顶布局

type 对应类型
container-sticky 吸顶或吸底，根据属性指定

轮播滚动布局

样式

type 对应类型
container-banner 轮播

属性

字段 意义 类型 样例
itemRatio 内部 View 的宽高比，宽度按满屏幕根据ratio计算高度，建议设置此属性，可预先占位，避免 Banner 有一个高度撑开的过程 Number或者String 2.4
pageRatio 内部 View 宽度占总屏幕宽度的比例，如内部 View 宽度为 120，屏幕宽为750，则此值是 120/750=0.16 Number或者String 0.16
margin 卡片的外间距，顺序是上右下左 Array(内部是Number或者String)/String [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建议使用第一种
padding 卡片的内间距，顺序是上右下左 Array(内部是Number或者String)/String [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建议使用第一种
autoScroll 自动滚动的间隔，单位毫秒，填写数字大于0就开始自动滚动，默认值 String/Number “3000”,3000
specialInterval 单独指定每一帧的自动滚动的间隔，单位毫秒，key从0开始计数；与autoScroll配合使用，当未在此声明某一帧的停留时间的时候，使用autoScroll指定的间隔，否则使用此处声明的间隔时间 Map {“1”: “10000”, “2”: “5000”}
infinite 是否无限滚动 String/Bool “true”,”false”
indicatorImg1 指示器选中状态的图片，必须带图片宽高比后缀 String https://img.alicdn.com/tps/TB16i4qNXXXXXbBXFXXXXXXXXXX-32-4.png
indicatorImg2 指示器未被选中状态的图片，必须带图片宽高比后缀 String https://img.alicdn.com/tps/TB1XRNFNXXXXXXKXXXXXXXXXXXX-32-4.png
indicatorGravity 指示器位置，居中居左还是居右 String “left”/“right”/“center”
indicatorPosition 指示器位置，在内部还是在外部 String “inside”/“outside”
indicatorGap 每个之间的指示器间距 String/Number “9”
indicatorMargin 指示器相对于布局底端的间距 String/Number “9”
indicatorHeight 指示器高度 String/Number “9”
pageWidth 页面宽度，配置了此参数，轮播布局的滚动会变为线性,不配置的话，就是一页一页的滚动 String/Number “100”
scrollMarginLeft 最左边一帧距离布局左边的间距 String/Number “100”
scrollMarginRight 最右边一帧距离布局右边的间距 String/Number “100”
hGap 横向每一帧之间的间距 String/Number “100”

横向滚动布局

type 对应类型
container-scroll 线性滚动，不像轮播一样具有一页一页的效果

瀑布流布局

type 对应类型
container-waterfall 瀑布流
文档更新时间: 2021-05-12 18:30   作者：陈冕