更新记录
1.0.0(2020-07-23)
初始版本,如有新需求支持请留言
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
轮播组件
基础式
<ls-swiper :list="list" imgKey="imgUrl" :loop="true" :dots='true' :autoplay='true' @clickItem="clickItem()" />
链式
<ls-swiper :list="list" imgKey="imgUrl" imgWidth="95%" previousMargin="70" nextMargin='100' height='130'imgRadius="5" />
卡片式
<ls-swiper :list="list" imgKey="imgUrl" :crown="true" :loop="true" :shadow='true' height='130' previousMargin="120" nextMargin='120' imgRadius="5" />
props
参数名 |
说明 |
类型 |
默认值 |
list |
轮播数据 |
Array |
必输 |
imgKey |
轮播数据key(图片url属性) |
String |
必输 (自定义模式,非必输) |
autoplay |
是否自动播放 |
Boolean |
false |
loop |
是否循环 |
Boolean |
false |
autoplay |
是否自动播放 |
Boolean |
false |
dots |
是否显示轮播点 |
Boolean |
false |
crown |
卡片特效 (中间突出,两边缩放特效) |
Boolean |
false |
interval |
播放时间间隔 |
Number |
2000 |
duration |
滑动速度 |
Number |
1500 |
bottom |
轮播点下边距 |
Number |
10 (单位:px,设计图建议以375px为准) |
height |
高度 |
Number |
200 (单位:px,设计图建议以375px为准) |
previousMargin |
图片前边距 |
Number |
0 (单位:px,设计图建议以375px为准) |
nextMargin |
图片后间距 |
Number |
0 (单位:px,设计图建议以375px为准) |
imgRadius |
图片圆角 |
Number |
0 (单位:px,设计图建议以375px为准) |
imgWidth |
图片宽度 |
String |
100% |
@clickItem |
点击事件 |
Function |
@change |
切换事件 |
Function |
自定义
<ls-swiper :list="list">
<template v-slot="{data}">
xxx
</template>
</ls-swiper>
如有其他需求,可在插槽内编写自定义内容, 自动覆盖原图片样式。