0.1.4 • Published 4 years ago

jmhc-swiper v0.1.4

Weekly downloads
5
License
-
Repository
github
Last release
4 years ago

介绍

一款基于uniapp的简易轮播图组件

使用方式

引用组件

npm install jmhc-swiper
import jmhcSwiper from "jmhc-swiper"
Vue.use(jmhcSwiper)

使用组件

<jmhc-swiper :imageArr='imageArr' :dotsStyles='dotsStyles' :autoplay="true" :circular="false" :mode='mode' @click="click"></jmhc-swiper>
export default {
    data() {
        return {
            mode:'ellipse',
			dotsStyles:{
				width:20,
				bottom:40,
				indicatorActiveColor:'red'
			},
			imageArr: [
				{
					url: require('@/static/logo.png')
				},
				{
					url: require('@/static/logo.png')
				},
				{
					url: require('@/static/logo.png')
				}
			],
        }
    },
}

属性说明

属性类型默认值说明
imageArrArray轮播数据数组
autoplayBooleanfalse是否自动播放
circularBooleantrue是否衔接播放
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
modeStringcircular指示点类型:circular(圆),rectangle(矩形),ellipse(椭圆),number(数字)
dotsStylesObject指示点样式

dotsStyles 属性说明:

属性类型默认值说明
widthNumber5指示点的宽,单位px
heightNumber5指示点的高,单位px
bottomNumber10距离底部的距离,单位px
colorColor‘white’文字颜色
indicatorColorColor‘black’指示点颜色
indicatorActiveColorColor‘white’当前选中指示点颜色

方法

方法名说明参数
click点击图片触发事件当前value对象