轮播组件

当前可配置功能

基础轮播
宽度高度设置带单位
自动轮播
分页器
分页器自定义
前进后退按钮
前进后退按钮自定义
loop循环
懒加载
多栏轮播
多栏轮播间隔设置
垂直、水平方向轮播
卡片式轮播
联动轮播
增删栏目
带文件轮播（展示为icon，点击预览）
加载更多功能

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

使用

引入

import Swiper from '../common/swipe'
import SwiperGroup from '../common/swipe-group' //需要联动功能时引入

基础示例

    <c-swiper :propOption='options.swipeBoxNormal' :listData='listData'></c-swiper>

联动示例

    <c-swiper-group :propOption='groupOptions.swipeGroupHon.option'>
      <c-swiper v-for="(item, key) in groupOptions.swipeGroupHon.items" :key="item.propId" :propOption='item.option':listData='item.listData'></c-swiper>
    </c-swiper-group>

传入数据示例

listData: [
        {
          type: 'img',
          src: '../../static/1.png'
        },
        {
          type: 'img',
          src: '../../static/2.png'
        },
        {
          type: 'img',
          src: '../../static/3.png'
        },
        {
          type: 'audio',
          src: '../../static/4.mp3'
        },
        {
          type: 'video',
          src: '../../static/5.avi'
        },
        {
          type: 'txt',
          src: '../../static/6.txt'
        },
        {
          type: 'pdf',
          src: '../../static/7.pdf'
        }
      ]

传入配置示例

      options: {
        swipeBoxNormal: {
          propId: 'swipeBoxNormal',
          height: '30rem',
          width: '90rem'
        }
      }

配置项

Attribute

swipe-item

attr Object	attr name	attr	description	default	Value	required
propOption	height		轮播组件容器高度	100%	String	false
	width		轮播组件容器宽度	100%	String	false
	propId		轮播组件容器ID，后续作为唯一标识	''	String	true
	listData		数据内容	[ ]	Array	false
	slidesPerView		当前容器内显示的可见栏数量	1	Number	false
	spaceBetween		分栏显示时，栏目之间的间隔	0	Number	false
	direction		轮播方向	horizontal	horizontal,vertical	false
	initialSlide		加载后显示的栏目索引	0	Number	false
	speed		轮播速度	300	Number	false
	preloadImages		是否预加载	true	Boolean	false
	effect		轮播效果	slide	slide(普通切换、默认)，fade(淡入)，cube(方块)，coverflow(3d流)，flip(3d翻转)	false
	loop		是否可以循环轮播	false	Boolean	false
	observer		监听器，是否可以动态添加栏目	false	Boolean	false
	autoplay		是否开启自动轮播	false	Boolean	false
	delay		自动轮播延迟	3000	String, Number	false
	pagination
		type	分页器功能-分页器样式	bullets	‘bullets’ 圆点（默认） ‘fraction’ 分式 ‘progressbar’ 进度条 ‘custom’ 自定义	false
		dynamicBullets	分页器功能-动态分页器，数量多时会隐藏	false	Boolean	false
		clickable	分页器功能-分页器是否可点击	true	Boolean	false
	bulletsColor		分页样式pagination.type为bullets时，设置小点背景色	#007aff	String	false
	navigate
		position	前进后退按钮在容器中位置	inside	inside, outside	false
		type	前进后退按钮的样式类型	default	default, circle, large, bold, shadow	false
	lazy		是否懒加载	false	Boolean	false

Events

加载更多功能

    <c-swiper :propOption='options.swipeBoxMore' @last='loadmore' :listData='listDataMore'></c-swiper>

last事件关联于加载更多功能，当轮播组件滑动至最后一张时触发，需要执行当前引用组件的methods中的方法(loadmore)，对传入prop.listData的字段(listDataMore)二次赋值，继而更新视图

swipe-group

attr Object	attr name	description	default	Value	required
propOption
	height	轮播组件容器高度	100%	String	false
	width	轮播组件容器宽度	100%	String	false
	direction	联动组件的排列方式	horizontal	String	horizontal，vertical
	align	相对于group容器，在内部排列的方式，flex布局中的justify-content	around	around，between	false

王迎秋 / swiper-in-vue

轮播组件

当前可配置功能

Build Setup

使用

引入

基础示例

联动示例

传入数据示例

传入配置示例

配置项

Attribute

swipe-item

Events

加载更多功能

swipe-group

简介

发行版

贡献者

近期动态

王迎秋 / swiper-in-vue .gitee-modal { width: 500px !important; }

轮播组件

当前可配置功能

Build Setup

使用

引入

基础示例

联动示例

传入数据示例

传入配置示例

配置项

Attribute

swipe-item

Events

加载更多功能

swipe-group

简介

发行版

贡献者

近期动态

搜索帮助

王迎秋 / swiper-in-vue