更新记录
1.0(2024-11-19)
下载此版本
初次上传
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.99 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
√ |
× |
√ |
× |
× |
× |
√ |
引入组件
<script>
import swiperTab from "@/components/swiperTab/swiperTab.vue";
</script>
注册组件
<script>
export default {
components: {
swiperTab
}
}
</script>
使用组件--示例
<swiperTab :current="current" :scrollList="scrollList" :autoplay="false" :thumbBorder="true"></swiperTab>
需要传递的数据
data() {
return {
scrollList: [
{
imgurl:''
}
]
}
}
参数 props
参数 |
说明 |
类型 |
默认值 |
scrollList |
需要遍历的数组 |
array |
无 |
current |
选择的索引 |
number |
0 |
swiperHeight |
轮播图容器的高度(单位rpx) |
number |
500 |
thumbnailPadding |
缩略图容器上下内边距(单位rpx) |
number |
0 |
thumbnailWidth |
缩略图宽度(单位rpx) |
number |
200 |
thumbnailHeight |
缩略图高度(单位rpx) |
number |
160 |
autoplay |
自动切换 |
boolead |
false |
interval |
自动切换间隔时长 |
number |
2000 |
duration |
滑动动画时长 |
number |
500 |
thumbBorderColor |
缩略图边框颜色 |
string |
无 |
thumbBorderWidth |
缩略图边框宽度(单位px) |
number |
2 |
thumbBorder |
是否需要边框 |
boolead |
false |