# 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 属性

Swiper

配置 用途 取值 使用描述
:autoplay 是否自动播放轮播图 boolean 默认为true。
:circular 是否衔接滑动 boolean 默认为true。
: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 用户传入切换到指定索引 number 默认null。传入时autoplay和circular都会失效。
:slideSpeed 用户传入切换到指定索引的速度 number 默认0。为0时无过渡动画。
@bindchange 监听轮播图切换 Event 当index发生改变时触发,可获取到当前的index值。
@animationEnd 过渡结束时触发 Event 过渡结束时触发,可获取到当前的index值。
#

SwiperItem

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