swiper(轮播)组件

  swiper是一个非常强大的组件

  但是需要swiper-item这个标签来实现他想显示的内容

  swiper-item标签有个item-id的属性,属性值:字符串  是swiper-item的标识符;

  一个swiper标签只能显示一个swiper子元素的内容,所以说一个swiper-item就相当于一个板块,我们想进行四个图片的轮播的话,就是四个板块;

  swiper的属性:

    indicator-dots:属性值:布尔  是否显示面板指示点;

    indicator-color:属性值:字符串  显示指示点的颜色;

    indicator-active-color:属性值:字符串  显示当前滑块 指示点的颜色;

    autoplay:属性值:布尔  是否自动切换;

    current:属性值:数字  滑块的下标  / 指定哪个滑块

    interval:属性值:数字,(他的单位是毫秒)自动切换的时间间隔

    duration:属性值:数字,滑动的生命周期;

    circular:属性值:布尔,是否衔接滑块

    vertical:属性值:布尔,滑动方向是否为纵向;

    pervious-margin:属性值:数字 例:"10rpx",上一个滑块的一小部分

    next-margin:属性值:数字,显示下一个滑块的一小部分

    display-multiple-items:属性值:数字,同时显示几个滑块;

    skip-hidden-item-layout:属性值:布尔,是否跳过未显示的滑块布局,复杂情况下可以提升性能,但是会丢失影藏状态的布局信息;

    easing-function:指定swiper切换缓动的动画类型

      属性值:default:默认缓动函数;

          linear:线性动画

          easeInCubic:缓入动画;

          easeOutCubic:缓出动画;

          easeInOutCubic:缓入缓出动画

  事件:

    bindchange:current改变时会触发bingchange事件

    bindtransition:swiper-item的位置发生改变时,会触发bindtransition事件

    bindanimationfinish:动画结束时会触发bindanimationfinish事件;

  

posted on 2019-05-16 21:10  Web引领者  阅读(6040)  评论(0编辑  收藏  举报