《微信小程序开发从入门到实战》学习九十二

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