更新记录
1.0.0(2024-08-25) 下载此版本
1.0.0
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.21 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
1.引用组件
import LddSwiper from '@/components/ldd-swiper/ldd-swiper.vue'
2.注册组件
components:{
lddSwiper
}
3.template中使用 组件
<ldd-swiper :swiperList="swiperList" @clickItem="clickItem"></ldd-swiper>
4.参数
swiperList格式:[{img:'',text:''}]
最多支持20条数据项
// 面板指示点
swiperDots: {
type: Boolean,
default: false
},
// 指示点颜色
swiperColor: {
type: String,
default: '#999999'
},
// 选中指示点颜色
swiperActiveColor: {
type: String,
default: '#FFCC00'
},
// 是否自动切换
autoplay: {
type: Boolean,
default: false
},
// 自动切换时长
interval: {
type: Number,
default: 5000
},
// 滑动动画时长
duration:{
type: Number,
default: 500
},
// 是否采用衔接滑动
circular: {
type: Boolean,
default: false
},
// 滑动块视图容器
swiperList: {
type: Array,
default: function() {
return [];
}
},
// 是否开启自定义指示点
customize: {
type: Boolean,
default: true
}