0.1.4 • Published 6 years ago
jmhc-swiper v0.1.4
介绍
一款基于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对象 |