Swiper

Swiper

demo 原始链接demo 源码编辑文档组件源码

swiper - 图1

二维码

swiper - 图2

Install

安装

局部注册

全局注册

  1. import { Swiper } from 'vux'
  2. export default {
  3. components: {
  4. Swiper
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Swiper } from 'vux'
  4. Vue.component('swiper', Swiper)

list为图片列表快捷设置,如果你需要自定义一些样式,或者内容并不为纯图片,可以引用swiper-item组件来自定义。list 格式如下

  1. [{
  2. url: 'javascript:',
  3. img: 'https://static.vux.li/demo/1.jpg',
  4. title: '送你一朵fua'
  5. }, {
  6. url: 'javascript:',
  7. img: 'https://static.vux.li/demo/5.jpg',
  8. title: '送你一次旅行',
  9. fallbackImg: 'https://static.vux.li/demo/3.jpg'
  10. }]

fallbackImgv2.5.13 支持,它将在 img 加载失败时显示,注意的是 fallbackImg 可能会在 img 加载成功时也进行了加载,只是不会显示(取决于浏览器实现)。

不要在swiper里嵌套scroller,在web上过于复杂化而且手势会有冲突,相关Issue将不会处理。该组件场景是固定高度的内容列表,不支持为不同 swiper-item 设置不同高度。如果确实需要设置不同高度,可以通过 ref 获取 swiper, 通过 this.$refs.swiper.xheight = '100px' 设置。 切记,需要放在 $nextTick 中执行。

API

属性

名字类型默认值说明版本要求
listarray轮播图片列表,如果有自定义样式需求,请使用 swiper-item(使用 swiper-item 时仅有2个的情况下不支持循环)
directionstringhorizontal方向
show-dotsbooleantrue是否显示提示点
show-desc-maskbooleantrue是否显示描述半透明遮罩
dots-positionstringright提示点位置
dots-classstring提示className
autobooleanfalse是否自动轮播
loopbooleanfalse是否循环
intervalnumber3000轮播停留时长
thresholdnumber50当滑动超过这个距离时才滑动
durationnumber300切换动画时间
heightstring180px高度值。如果为100%宽度并且知道宽高比,可以设置aspect-ratio自动计算高度
aspect-rationumber用以根据当前可用宽度计算高度值
min-moving-distancenumber0超过这个距离时才滑动
v-modelnumber0index 绑定,使用v-model,一般不需要绑定

事件

名字参数说明版本要求
@on-index-change(currentIndex)轮播 index 变化时触发
@on-get-height(height)高度获取后触发v2.7.0

Variables

样式变量

名字默认值说明继承自变量
@swiper-indicator-active-color #04BE02 @theme-color

重要提示及已知问题

重要提示及已知问题

  • Qswiper-item 只有两项时无法循环播放

是的,建议直接使用 list 来实现循环。因为实现原理是对swiper-item元素进行移动,需要至少有3swiper-item才能保证有上一张和下一张可以切换。

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 45,贡献人数 8
airylandunclayClay万刚jackieWilliam WeiF-loatwg

Changelog

发布日志

  • v2.9.2 [fix] 修复设置最小移动距离后滑动卡住 #2773
  • v2.9.2 [fix] 修复在循环模式下重复设置数据的错误 #2803
  • v2.7.7 [fix] 修复只有一个 item 时无法滚动页面的问题
  • v2.7.6 [enhance] 只有一张图片时阻止滑动跟随
  • v2.7.0 [enhance] 非循环模式下对第一张和最后一张使用更短的拖动距离
  • v2.7.0 [feature] 添加事件 event:on-get-height #2112
  • v2.7.0 [enhance] auto 支持动态设置 #2027
  • v2.6.0 [enhance] 支持 list.fallbackImg 属性在图片加载失败时显示预设图片 #1923
  • v2.5.3 [fix] 轮播个数不为2时清除 listTtwoLoopItem 列表 #1684 @weizs
  • v2.5.1 [fix] 修复 array-from 在 webpack@3 下报错问题 #1649
  • v2.3.5 [fix] 修复重复渲染问题 #1458
  • v2.3.4 [fix] 修复只有两个轮播图且为 loop 时点击失效问题 #1484 @unclay
  • v2.2.1-rc.2 [enhance] 如果初始化时获取不到宽度则直接使用视口宽度 #1188
  • v2.2.1-rc.2 [fix] 修复初始化时 index > 0 不生效
  • v2.1.1-rc.3 [fix] 修复 node 列表没有 forEach 方法 #991 @howyhuang
  • v2.1.1-rc.2 [fix] 修复部分机子不支持 for of 遍历