Swiper 组件使用教程
优质
小牛编辑
140浏览
2023-12-01
安装
import { Swiper } from 'vux'
export default {
components: {
Swiper
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Swiper } from 'vux'
Vue.component('swiper', Swiper)
list为图片列表快捷设置，如果你需要自定义一些样式，或者内容并不为纯图片，可以引用swiper-item组件来自定义。list 格式如下
[{
url: 'javascript:',
img: 'https://static.vux.li/demo/1.jpg',
title: '送你一朵fua'
}, {
url: 'javascript:',
img: 'https://static.vux.li/demo/5.jpg',
title: '送你一次旅行',
fallbackImg: 'https://static.vux.li/demo/3.jpg'
}]
fallbackImg 在 v2.5.13 支持，它将在 img 加载失败时显示，注意的是 fallbackImg 可能会在 img 加载成功时也进行了加载，只是不会显示（取决于浏览器实现）。
不要在swiper里嵌套scroller，在web上过于复杂化而且手势会有冲突，相关Issue将不会处理。
该组件场景是固定高度的内容列表，不支持为不同 swiper-item 设置不同高度。
如果确实需要设置不同高度，可以通过 ref 获取 swiper, 通过 this.$refs.swiper.xheight = '100px' 设置。 切记，需要放在 $nextTick 中执行。
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| list | array | 轮播图片列表，如果有自定义样式需求，请使用 swiper-item(使用 swiper-item 时仅有2个的情况下不支持循环) | -- | |
| direction | string | horizontal | 方向 | -- |
| show-dots | boolean | true | 是否显示提示点 | -- |
| show-desc-mask | boolean | true | 是否显示描述半透明遮罩 | -- |
| dots-position | string | right | 提示点位置 | -- |
| dots-class | string | 提示className | -- | |
| auto | boolean | false | 是否自动轮播 | -- |
| loop | boolean | false | 是否循环 | -- |
| interval | number | 3000 | 轮播停留时长 | -- |
| threshold | number | 50 | 当滑动超过这个距离时才滑动 | -- |
| duration | number | 300 | 切换动画时间 | -- |
| height | string | 180px | 高度值。如果为100%宽度并且知道宽高比，可以设置aspect-ratio自动计算高度 | -- |
| aspect-ratio | number | 用以根据当前可用宽度计算高度值 | -- | |
| min-moving-distance | number | 0 | 超过这个距离时才滑动 | -- |
| v-model | number | 0 | index 绑定，使用v-model，一般不需要绑定 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-index-change | (currentIndex) | 轮播 index 变化时触发 | -- |
| @on-get-height | (height) | 高度获取后触发 | v2.7.0 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @swiper-indicator-active-color | #04BE02 | -- | @theme-color |
重要提示及已知问题
- Qswiper-item 只有两项时无法循环播放
是的，建议直接使用
list来实现循环。因为实现原理是对swiper-item元素进行移动，需要至少有3个swiper-item才能保证有上一张和下一张可以切换。