Swiper轮播

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-swiper": "/miniprogram_npm/vtuweapp/swiper/vtu-swiper"
    3. }
    4.

    代码演示

    卡片式轮播用法

    1. <vtu-swiper type="card" height="{{(windowWidth-40)/2}}px" list="{{imageList}}" swiper-class="swiperClass" indicator-dots="{{true}}" current="{{current}}" bind:change="bindChange"></vtu-swiper>
    3. Page({
    4.   data: {
    5.       current: 1,
    6.       imageList: [
    7.         {
    8.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/1.png',
    9.           mode: "widthFix"
    10.         },
    11.         {
    12.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/2.png',
    13.           mode: "widthFix"
    14.         },
    15.         {
    16.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/3.png',
    17.           mode: "widthFix"
    18.         },
    19.         {
    20.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/4.png',
    21.           mode: "widthFix"
    22.         },
    23.         {
    24.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/5.png',
    25.           mode: "widthFix"
    26.         }
    27.       ],
    28.       imageList2: [
    29.         {
    30.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/2.png',
    31.           content: '红米7大电量18个月质保智能学生老年人全网通手机小米官方旗舰店redmi7A官网正品xiaomi红米note7',
    32.           mode: "widthFix"
    33.         },
    34.         {
    35.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/4.png',
    36.           content: 'OPPO K3 oppok3手机全新机新款上市oppok3限量超薄oppoa5手机 a7x r17oppor15x 0ppok3r90pp0k1',
    37.           mode: "widthFix"
    38.         },
    39.         {
    40.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/1.png',
    41.           content: '12期分期可减540当天发Huawei/华为 P30手机官方旗舰店正品p30荣耀p30pro直降mate20x新款5g全网通p10 p20pro',
    42.           mode: "widthFix"
    43.         },
    44.         {
    45.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/3.png',
    46.           content: '【选送小米27W快充头】Xiaomi/小米 Redmi K20Pro骁龙855红米K20手机官方旗舰弹出全面屏4800万广角三摄note7',
    47.           mode: "widthFix"
    48.         },
    49.         {
    50.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/5.png',
    51.           content: '可12期免息【抢360券+送无线充】xiaomi/小米9手机plus官方旗舰店骁龙855透明尊享版九Mix4红米K20小米9学生',
    52.           mode: "widthFix"
    53.         }
    54.       ],
    55.       windowWidth: wx.getSystemInfoSync().windowWidth
    56.   },
    58.   bindChange: function(e) {
    59.     this.setData({
    60.       current: e.detail.current
    61.     })
    62.   }
    63. });
    64.  
    65.

    基础用法

    1. <vtu-swiper list="{{imageList}}" height="{{(windowWidth-40)/2}}px" dot-type="round" indicator-active-color="#3fe816" swiper-class="swiperClass" indicator-dots="{{true}}" current="{{current}}" bind:change="bindChange"></vtu-swiper>
    3. Page({
    4.   data: {
    5.       current: 1,
    6.       imageList: [
    7.         {
    8.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/1.png',
    9.           mode: "widthFix"
    10.         },
    11.         {
    12.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/2.png',
    13.           mode: "widthFix"
    14.         },
    15.         {
    16.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/3.png',
    17.           mode: "widthFix"
    18.         },
    19.         {
    20.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/4.png',
    21.           mode: "widthFix"
    22.         },
    23.         {
    24.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/5.png',
    25.           mode: "widthFix"
    26.         }
    27.       ],
    28.       imageList2: [
    29.         {
    30.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/2.png',
    31.           content: '红米7大电量18个月质保智能学生老年人全网通手机小米官方旗舰店redmi7A官网正品xiaomi红米note7',
    32.           mode: "widthFix"
    33.         },
    34.         {
    35.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/4.png',
    36.           content: 'OPPO K3 oppok3手机全新机新款上市oppok3限量超薄oppoa5手机 a7x r17oppor15x 0ppok3r90pp0k1',
    37.           mode: "widthFix"
    38.         },
    39.         {
    40.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/1.png',
    41.           content: '12期分期可减540当天发Huawei/华为 P30手机官方旗舰店正品p30荣耀p30pro直降mate20x新款5g全网通p10 p20pro',
    42.           mode: "widthFix"
    43.         },
    44.         {
    45.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/3.png',
    46.           content: '【选送小米27W快充头】Xiaomi/小米 Redmi K20Pro骁龙855红米K20手机官方旗舰弹出全面屏4800万广角三摄note7',
    47.           mode: "widthFix"
    48.         },
    49.         {
    50.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/5.png',
    51.           content: '可12期免息【抢360券+送无线充】xiaomi/小米9手机plus官方旗舰店骁龙855透明尊享版九Mix4红米K20小米9学生',
    52.           mode: "widthFix"
    53.         }
    54.       ],
    55.       windowWidth: wx.getSystemInfoSync().windowWidth
    56.   },
    58.   bindChange: function(e) {
    59.     this.setData({
    60.       current: e.detail.current
    61.     })
    62.   }
    63. });
    64.

    字幕轮播

    1. <vtu-swiper list="{{imageList2}}" height="{{(windowWidth-40)/2}}px" dot-type="content" swiper-content-class="swiperContentClass" indicator-active-color="rgba(0, 0, 0, .5)" dot-font-color="#fff" swiper-class="swiperClass" indicator-dots="{{true}}" current="{{current}}" bind:change="bindChange"></vtu-swiper>
    4. Page({
    5.   data: {
    6.       current: 1,
    7.       imageList: [
    8.         {
    9.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/1.png',
    10.           mode: "widthFix"
    11.         },
    12.         {
    13.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/2.png',
    14.           mode: "widthFix"
    15.         },
    16.         {
    17.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/3.png',
    18.           mode: "widthFix"
    19.         },
    20.         {
    21.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/4.png',
    22.           mode: "widthFix"
    23.         },
    24.         {
    25.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/5.png',
    26.           mode: "widthFix"
    27.         }
    28.       ],
    29.       imageList2: [
    30.         {
    31.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/2.png',
    32.           content: '红米7大电量18个月质保智能学生老年人全网通手机小米官方旗舰店redmi7A官网正品xiaomi红米note7',
    33.           mode: "widthFix"
    34.         },
    35.         {
    36.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/4.png',
    37.           content: 'OPPO K3 oppok3手机全新机新款上市oppok3限量超薄oppoa5手机 a7x r17oppor15x 0ppok3r90pp0k1',
    38.           mode: "widthFix"
    39.         },
    40.         {
    41.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/1.png',
    42.           content: '12期分期可减540当天发Huawei/华为 P30手机官方旗舰店正品p30荣耀p30pro直降mate20x新款5g全网通p10 p20pro',
    43.           mode: "widthFix"
    44.         },
    45.         {
    46.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/3.png',
    47.           content: '【选送小米27W快充头】Xiaomi/小米 Redmi K20Pro骁龙855红米K20手机官方旗舰弹出全面屏4800万广角三摄note7',
    48.           mode: "widthFix"
    49.         },
    50.         {
    51.           url: 'https://activity.vtuzx.com/doc/vtuUI/weapp/swiper/5.png',
    52.           content: '可12期免息【抢360券+送无线充】xiaomi/小米9手机plus官方旗舰店骁龙855透明尊享版九Mix4红米K20小米9学生',
    53.           mode: "widthFix"
    54.         }
    55.       ],
    56.       windowWidth: wx.getSystemInfoSync().windowWidth
    57.   },
    59.   bindChange: function(e) {
    60.     this.setData({
    61.       current: e.detail.current
    62.     })
    63.   }
    64. });
    65.

    组件参数

    Props

    参数说明类型默认值必填
    type类型，default/cardString-否
    list轮播图片列表Array-否
    indicator-dots是否显示面板指示点Booleanfalse否
    indicator-color指示点颜色Stringrgba(0, 0, 0, .3)否
    indicator-active-color选中指示点颜色Stringrgba(109,109,109,0.76)否
    autoplay是否自动切换Booleanfalse否
    current当前索引Number0否
    interval切换时间间隔Number5000否
    duration滑动时长Number500否
    circular是否采用衔接滑动Booleanfalse否
    vertical滑动方向是否为纵向Booleanfalse否
    easing-function指定 swiper 切换缓动动画类型Stringdefault否
    display-multiple-items同时显示的滑块数量Number1否
    dot-font-color轮播文本字体颜色String"#fff"否
    height轮播区域高度String-否

    easing-function 的合法值

    值说明
    default默认缓动函数
    linear线性动画
    easeInCubic缓入动画
    easeOutCubic缓出动画
    easeInOutCubic缓入缓出动画

    list参数值

    参数说明类型默认值必填
    url轮播图片链接地址String-否
    mode图片裁剪、缩放的模式(参考微信文档)StringwidthFix否
    content文本轮播内容String-否

    Events

    方法名说明参数返回值
    bind:changecurrent 改变时会触发 change 事件，event.detail = {current, source}--
    bind:transitionswiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}--
    bind:animationfinish动画结束时会触发 animationfinish 事件，event.detail 同上--

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Swiper 轮播 - 图1