设置滚动条位置时默认是没有动画过渡的,scroll-with-animation设置为true即可开启动画过渡效果。
enable-back-to-top设置为true,用户单击标题栏可以让scroll-view中的内容快速地回到最顶部。iOS单击标题栏即可,Android需要双击标题栏。
bindscrolltoupper、bindscrolltolower和bindscroll可以绑定事件监听函数。
使用scroll-view组件需要注意:
1、基础库2.4.0版本以下不支持嵌套textarea、map、canvas、video组件。
2、在scroll-view中滚动无法触发onPullDownRefresh
swiper是滑块容器组件,需要与swiper-item组件结合使用。swiper组件内部只能放swiper-item组件,在swiper-item组件中才可放其他内容。
每个swiper-item代表一个滑块的内容,同一时刻swiper组件只显示一个swiper-item的内容,左右滑动可以切换显示不同的swiper-item。
swiper组件的属性如下:
属性 | 类型 | 默认值 | 说明 | 最低版本 |
indicator-dots | boolen | false | 是否显示面板指示点 | 1.0.0 |
indicator-color | color | rgba(0,0,0,0.3) | 指示点颜色 | 1.1.0 |
indicator-active-color | color | #000000 | 当前选中的指示点颜色 | 1.1.0 |
current | number | 0 | 当前滑块所在的index | 1.0.0 |
autoplay | boolean | false | 是否自动切换 | 1.0.0 |
interval | number | 5000 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 滑动动画时长 | 1.0.0 |
easing-function | string | default | 指定swiper切换动画类型,可选值如下: default:默认动画 linear:线性动画 easeInCubic:缓入动画 easeOutCubic:缓出动画 easeInOutCubic:缓入缓出动画 | 2.6.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-item | number | 1 | 同时显示的滑块数量 | 1.9.0 |
bindchange | eventhandle | current改变时会触发chage事件,event.detail={current.source},source表示导致变更的原因,可能的值如下: autoplay:自动播放 touch:用户滑动 空字符串:其他原因 | 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 |