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

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