微信小程序——UI(2)、swiper

swiper

滑块视图容器，常用来做Banner广告条，简单的控制轮播。其中只可放置swiper-item组件。

常用属性

swiper-item中无特殊属性，作为swiper的子布局、Item的父布局。

• indicator-dots boolean
  是否显示面板指示点。默认为false不显示。注意：字符串只要不为空就算是true，若要直接指定boolean类型的值需要写成indicator-dots="{{false}}"。
• indicator-color color
  指示点颜色
• indicator-active-color color
  当前选中的指示点颜色。
• current number
  当前所在滑块的 index，默认为0，很少需要手动设定指定该值为其他值。
• autoplay boolean
  是否自动切换，默认为false。
• interval number
  自动切换时间间隔，单位为ms，默认为5000。
• duration number
  滑动切换动画时长，单位为ms，默认为500。
• circular boolean
  是否采用衔接滑动，默认为false，若设为true，则最后一个滑动到第一个是循环式的而非快速逆向转到第一个，这里建议设为true，体验更好。
• vertical boolean
  滑动方向是否为纵向，默认为false即横向。横向滑动时指示点在下方，纵向滑动时指示点在右侧。
• previous-margin、next-margin string
  前边距、后边距，可用于露出前一项、后一项的一小部分。
• display-multiple-items number
  同时显示的滑块数量，默认为1。设为2时屏幕内同时显示2个item，2个指示器处于选中激活状态。
• skip-hidden-item-layout boolean
  是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息。默认为false，具体效果还未实践。
• easing-function string
  指定 swiper 切换缓动动画类型，需要版本库2.6.5才支持，默认值default默认缓动函数、linear线性动画、easeInCubic缓入动画、easeOutCubic缓出动画、easeInOutCubic缓入缓出动画。一般情况不需要使用。
• bindchange eventhandle
  current 改变时会触发 change 事件，event.detail = {current, source}。具体效果还未实践。
• bindtransition eventhandle
  swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，需要版本库2.4.3才支持。具体效果还未实践。
• bindanimationfinish eventhandle
  动画结束时会触发 animationfinish 事件，event.detail 同上。具体效果还未实践。

该笔记实现效果：

本文源码地址，若需git下载该tag版本，请注意命令指定tag。