更新记录
1.0.2(2021-07-31)
下载此版本
- 修复H5,APP 端api控制前进后退没有动画 BUG
- nvue 支持,但是api控制没有动画
1.0.1(2021-07-10)
下载此版本
vertical 默认值 false
1.0.0(2021-07-10)
下载此版本
第一版
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
prop
属性 |
类型 |
默认值 |
描述 |
list |
Array |
[] |
总的列表 |
dataIndex |
Number |
0 |
当前展示节点对应list的数组下标 |
vertical |
Boolean |
false |
是否竖向滑动 |
duration |
Numer |
250 |
滑动动画时长 |
autoplay |
Boolean |
false |
是否自动切换 |
interval |
Number |
5000 |
自动切换间隔时间(ms) |
easing-function |
String |
default |
动画类型 |
getPreviousHandler |
promise function |
null |
判断是否有上一个item,当滑动到第一个item时触发,可以在这异步加载数据,如果有数据,返回true,没有返回false |
getNextHandler |
promise function |
null |
判断是否有下一个item,当滑动到最后一个item时触发,可以在这异步加载数据,如果有数据,返回true,没有返回false |
事件
事件 |
调用参数 |
描述 |
@cahnge |
currentIndex |
swiper切换时触发,当使用异步加载时,到边界处currentIndex不会变,但也会触发 |
方法
方法 |
调用参数 |
描述 |
goPrevious |
无 |
$refs获取实力 切换上一个 |
goNext |
无 |
$refs获取实力 切换下一个 |
使用
<pw-swiper
ref="swiper"
:list="list"
:getPreviousHandler="gph"
:getNextHandler="gnh"
:dataIndex="currentIndex"
@change="change"
>
<template v-slot:default="{item,index}" >
<view class="body">{{item}}/{{index}}</view>
</template>
</pw-swiper>
具体使用示例可以参考示例工程