7.1 视图容器组件
7.1.2 scroll-view组件
设置滚动条位置时默认是没有动画过渡的,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
7.1.3 swiper与swiper-item组件
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