wechat-miniprogram / kbone

# KSwiper

滑块视图容器。其中只可放置一级 swiper-item 组件，否则会导致未定义的行为。

# 使用指南

import {KSwiper} from 'kbone-ui'
1

# 实例

<KSwiper
  :indicator-dots="indicatorDots"
  :circular="circularFlag"
  :autoplay="autoplay"
  :duration="duration"
  :interval="interval"
>
  <KSwiperItem
    v-for="(item,index) in background"
    :key="index" >
    <KView :class="'swiper-item '+ item"/>
  </KSwiperItem>
</KSwiper>
1
2
3
4
5
6
7
8
9
10
11
12
13

Swiper

Swiper 内容

指示点
衔接滑动
自动播放
幻灯片切换时长
500ms
自动播放间隔时长
2000ms

# 使用参数

H5 小程序 属性 类型 默认值 必填 说明
o o current/v-model number 0 否 当前所在滑块的 index, 推荐直接使用 v-model 监听值的改变
o o autoplay boolean false 否 是否自动切换
o o interval number 5000 否 自动切换时间间隔
o o duration number 500 否 滑动动画时长
o o circular boolean false 否 是否采用衔接滑动
o vertical boolean false 否 滑动方向是否为纵向
o o indicator-dots boolean false 否 是否显示面板指示点
o indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色
o indicator-active-color color #000000 否 当前选中的指示点颜色
o previous-margin string "0px" 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
o next-margin string "0px" 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
o display-multiple-items number 1 否 同时显示的滑块数量
o skip-hidden-item-layout boolean false 否 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
o easing-function string "default" 否 指定 swiper 切换缓动动画类型
o o bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source}
o bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
o bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件，event.detail 同上

easing-function 的合法值

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

← KSwiperItem →