UI精讲之布局基础 flex布局和相对绝对定位
开发文档
1. 视图组件
1.1 scroll-view
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|
croll-x | boolean | false | 否 | 允许横向滚动 | 1.0.0 |
scroll-y | boolean | false | 否 | 允许纵向滚动 | 1.0.0 |
upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时,触发 scrolltoupper 事件 | 1.0.0 |
lower-threshold | number/string | 50 | 否 | 距底部/右边多远时,触发 scrolltolower 事件 | 1.0.0 |
scroll-top | number/string | | 否 | 设置竖向滚动条位置 | 1.0.0 |
scroll-left | number/string | | 否 | 设置横向滚动条位置 | 1.0.0 |
scroll-into-view | string | | 否 | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 | 1.0.0 |
scroll-with-animation | boolean | false | 否 | 在设置滚动条位置时使用动画过渡 | 1.0.0 |
enable-back-to-top | boolean | false | 否 | iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 | 1.0.0 |
enable-flex | boolean | false | 否 | 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。 | 2.7.3 |
scroll-anchoring | boolean | false | 否 | 开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。 | 2.8.2 |
bindscrolltoupper | eventhandle | | 否 | 滚动到顶部/左边时触发 | 1.0.0 |
bindscrolltolower | eventhandle | | 否 | 滚动到底部/右边时触发 | 1.0.0 |
bindscroll | eventhandle | | 否 | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | 1.0.0 |
1.2 swiper
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
previous-margin | string | “0px” | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
next-margin | string | “0px” | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 | 1.9.0 |
easing-function | string | “default” | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
bindchange | eventhandle | | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 1.0.0 |
bindtransition | eventhandle | | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} | 2.4.3 |
bindanimationfinish | eventhandle | | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上 | 1.9.0 |
2. 基础组件
2.1 icon
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|
type | string | | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 |
size | number/string | 23 | 否 | icon的大小 | 1.0.0 |
color | string | | 否 | icon的颜色,同css的color | 1.0.0 |
示例代码
2.2 text
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|
selectable | boolean | false | 否 | 文本是否可选 | 1.1.0 |
space | string | | 否 | 显示连续空格 | 1.4.0 |
decode | boolean | false | 否 | 是否解码 | 1.4.0 |
2.3 progress
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|
percent | number | | 否 | 百分比0~100 | 1.0.0 |
show-info | boolean | false | 否 | 在进度条右侧显示百分比 | 1.0.0 |
border-radius | number/string | 0 | 否 | 圆角大小 | 2.3.1 |
font-size | number/string | 16 | 否 | 右侧百分比字体大小 | 2.3.1 |
stroke-width | number/string | 6 | 否 | 进度条线的宽度 | 1.0.0 |
color | string | #09BB07 | 否 | 进度条颜色(请使用activeColor) | 1.0.0 |
activeColor | string | #09BB07 | 否 | 已选择的进度条的颜色 | 1.0.0 |
backgroundColor | string | #EBEBEB | 否 | 未选择的进度条的颜色 | 1.0.0 |
active | boolean | false | 否 | 进度条从左往右的动画 | 1.0.0 |
active-mode | string | backwards | 否 | backwards: 动画从头播;forwards:动画从上次结束点接着播 | 1.7.0 |
duration | number | 30 | 否 | 进度增加1%所需毫秒数 | 2.8.2 |
bindactiveend | eventhandle | | 否 | 动画完成事件 | 2.4.1 |