# Basic (swiper一般选项)
# initialSlide
- 类型:
number
- 默认值:0
设定初始化时slide的索引。Swiper默认初始化时显示第一个slide,有时想初始化时直接显示其他slide,可以做此设置。
options:{
initialSlide :2,
}
# direction
- 类型:
string
- 默认值:horizontal
- 可选:vertical
Swiper的滑动方向,可设置为水平方向切换(horizontal)或垂直方向切换(vertical)。
options:{
direction : 'vertical',
}
# speed
- 类型:
number
- 默认值:300
切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间。
options:{
speed:300,
}
# width
- 类型:
number
- 默认值:-
设置swiper的宽度。通常情况下该参数无需设置。swiper会自动获取父级的宽度。
# height
- 类型:
number
- 默认值:-
设置swiper的高度。通常情况下该参数无需设置。swiper会自动获取父级的高度。
# swiperItemWidth
- 类型:
number
- 默认值:-
设置swiper-item的宽度。用于在swiper无法正确获取宽高的情况下设置swiper的宽高(如快手小程序)。
# swiperItemHeight
- 类型:
number
- 默认值:-
设置swiper-item的高度。用于在swiper无法正确获取宽高的情况下设置swiper的宽高(如快手小程序)。
# noSwiping
- 类型:
boolean
- 默认值:false
是否禁止触摸。当禁止触摸开启时,不可通过滑动切换。可通过自动切换,slideTo等方法切换。
# roundLengths
- 类型:
boolean
- 默认值:false
如果设置为true,则将slide的宽和高取整(四舍五入),以防止某些分辨率的屏幕上文字或边界(border)模糊。
例如当你设定slidesPerView: 3的时候,则可能出现slide的宽度为341.33px,开启roundLengths后宽度取整数341px。
options:{
roundLengths : true,
}
# autoHeight
- 类型:
boolean
- 默认值:false
自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。
options:{
autoHeight: true,
}
# watchOverflow
- 类型:
boolean
- 默认值:false
当没有足够的slide切换时,例如只有1个slide,swiper会失效且隐藏导航等。默认不开启这个功能。 loop模式无效,因为会复制slide。
options:{
watchOverflow: true,
}
# init
- 类型:
boolean
- 默认值:true
当你创建一个Swiper实例时是否立即初始化。 如果禁止了,可以稍后使用this.$refs.zSwiper.swiper.init()来初始化。(2.2.0后废弃,swiper将会自动初始化。)
options:{
init: false,
}
# on
- 类型:
object
- 默认值:-
注册事件。
因为小程序props无法传递函数,所以提供了向swiper注入事件的方法。如监听swiper的改变:
onReady() {
this.$refs.zSwiper.setSwiperOn("slideChange", (swiper) => {
uni.showToast({
title: '当前 swiper 索引:' + swiper.activeIndex,
icon: 'none'
})
});
},
# enabled
- 类型:
boolean
- 默认值:true
设置Swiper初始时是否可用,默认是可用(true)。当Swiper被禁用时,它将隐藏所有导航元素(分页器、按钮、滚动条)并且不会响应任何事件和交互。
options:{
enabled:false,
}
← 配置 Carousel (旋转木马) →