数据展示 - swiper - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

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 中执行。

API

属性

名字	类型	默认值	说明	版本要求
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`，一般不需要绑定	—