更新记录
0.0.5(2024-06-07)
下载此版本
优化
0.0.4(2024-06-05)
下载此版本
插件包更新
0.0.3(2024-06-05)
下载此版本
兼容更新,各平台可自测是否支持
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.6.18 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
使用方式
<template>
<view class="test">
<vi-swiper :list="list" v-model="current" @change="onChange" @click="onClick"></vi-swiper>
</view>
</template>
<script>
export default {
data() {
return {
list: [
'https://img.zcool.cn/community/01dedb5be3fa58a801209252787070.jpg@1280w_1l_2o_100sh.jpg',
'https://img.zcool.cn/community/014d105978da02a8012193a3d2a344.jpg',
'https://img.zcool.cn/community/014aae5ee1feefa801215aa0785cc4.jpg@2o.jpg'
],
current: 0
}
},
methods: {
onChange(i) {
console.log('onChange', i)
},
onClick(i) {
console.log('onClick', i)
}
}
}
</script>
属性说明
名称 |
类型 |
默认值 |
描述 |
value |
Number |
0 |
当前数据源索引值 |
list |
Array |
[] |
轮播数据源 |
radius |
Boolean |
true |
是否开启圆角 |
radiusSize |
mini, normal, large |
normal |
圆角大小 |
swiperWidth |
Number |
650 |
轮播容器宽度 |
swiperHeight |
Number |
350 |
轮播容器高度 |
verticalPadding |
Number |
350 |
垂直方向内边距 |
horizontalPadding |
Number |
50 |
水平方向内边距 |
pxUnit |
String |
rpx |
像素单位 |
transDuration |
Number |
1 |
动画持续时长(单位:秒) |
autoplay |
Boolean |
true |
是否自动轮播 |
indicator-dots |
Boolean |
true |
是否显示面板指示点 |
circular |
Boolean |
true |
是否采用衔接滑动,即播放到末尾后重新回到开头 |
interval |
Number |
5000 |
轮播自动切换时间间隔 |
@change |
Function |
|
轮播图改变回调 |
@click |
Function |
|
点击轮播图事件 |