# Swiper 轮播

轮播图组件，字段基本对标微信小程序，务必搭配 SwiperItem 使用！！！

# 引入说明

TIP

import Swiper from "jimoui/components/Swiper/Swiper"
import SwiperItem from "jimoui/components/SwiperItem/SwiperItem"

1
2

# 代码演示

TIP

<Swiper
    :autoplay="true"
    :indicatorDots="true"
    :circular="true"
    indicatorColor="#ffffff"
>
    <SwiperItem v-for="(item,index) in XXXList" 
                @clickSlide="handleJump($event,item.url)" 
                :key="index">
        <!-- 放上你想要的展示的内容 -->
        <img :src="item.XXX" alt />
    </SwiperItem>
</Swiper>

<!-- 多可视化slider -->
<Swiper :autoplay="true"
        :indicatorDots="true"
        :circular="true"
        :slidesPerView="1.2"
        :loopedSlides="4"
        :spaceBetween="10"
        :sliderPaddinglr="'0'"
        @bindchange="swiperChange"
        indicatorColor="#ffffff">
    <SwiperItem v-for="(item, index) in list" :key="index">
        <img :src="item.src" alt />
    </SwiperItem>
</Swiper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 属性

Swiper

配置	用途	取值	使用描述
:autoplay	是否自动播放轮播图	boolean	默认为true。
:circular（loop）	是否衔接滑动	boolean	默认为true。circular（loop）为true时，SwiperItem 内部插槽DOM节点点击失效，参考SwiperItem下的@clickSlide方法
:indicatorDots	是否显示面板指示点	boolean	默认为true。
indicatorColor	指示点颜色	color	默认为多点橙色 "#ff680a"，可修改任意色值
:indicatorCenter	指示点是否居中	boolean	默认为false。靠右
interval	轮播滚动时间间隔	number	默认为3000ms。
duration	滑动动画时长	number	默认为300ms。
spaceBetween	slider间隔	number	默认为20。
sliderPaddinglr	slider内边距	string	默认为5pt。若修改，单位请自行换算。
:disableOnInteraction	用户操作后是否禁止播放	boolean	默认为false。不建议修改。
:vertical	是否纵向滚动	boolean	默认为false，横向滚动。
:userCanChange	用户是否可操作	boolean	默认为true。可禁止用户滑动。
:slideTo	用户传入切换到指定索引（不需要loop时使用）	number	默认null。传入时autoplay和circular都会失效。
:slideToLoop	用户传入切换到指定索引（需要loop时使用）	number	默认null。
:slideSpeed	用户传入切换到指定索引的速度	number	默认0。为0时无过渡动画。
:slidesPerView	设置slider容器能够同时显示的slides数量(carousel模式)	number/string	默认1。可传数字或 'auto'。
:loopedSlides	在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。	number	默认1。
:initIndex	用户传入初始化时的帧数索引	number	默认0。
@bindchange	监听轮播图切换	Event	当index发生改变时触发，可获取到当前的index值。
@animationEnd	过渡结束时触发	Event	过渡结束时触发，可获取到当前的index值。

#

SwiperItem

配置	用途	取值	使用描述
borderRadius	轮播图圆角	string	默认为圆角8pt。若修改，单位请自行换算
@clickSlide	点击事件	event	当swiper开启 circular（loop）为true时，SwiperItem 内部插槽DOM节点点击失效，故在 SwiperItem 上添加点击回调方法。返回点击的当前 index。