介绍

一款基于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')
				}
			],
        }
    },
}

属性说明

属性	类型	默认值	说明
imageArr	Array		轮播数据数组
autoplay	Boolean	false	是否自动播放
circular	Boolean	true	是否衔接播放
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
mode	String	circular	指示点类型：circular（圆），rectangle（矩形），ellipse（椭圆），number（数字）
dotsStyles	Object		指示点样式

dotsStyles 属性说明：

属性	类型	默认值	说明
width	Number	5	指示点的宽，单位px
height	Number	5	指示点的高，单位px
bottom	Number	10	距离底部的距离，单位px
color	Color	‘white’	文字颜色
indicatorColor	Color	‘black’	指示点颜色
indicatorActiveColor	Color	‘white’	当前选中指示点颜色

方法

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