更新记录
0.0.3(2024-12-04)
下载此版本
未用到某些平台特有的技术,所以 所有支持css动画的均可使用此插件
0.0.2(2024-12-04)
下载此版本
现在可以正常下载了,0.0.1版本显示解压失败
0.0.1(2024-12-04)
下载此版本
本组件仅在HbuilderX4.29的vue2项目中测试,理论上适用于其他项目(因为并没有用到某些平台特有的技术)
本组件符合easycom格式,即“将组件导入到自己项目后,就能直接使用 cht-swiper
标签”。
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.2.6 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
cht-swiper
使用方法 easycom方式
<template>
<view>
<!-- 轮播图 -->
<cht-swiper :imgList="imgList" :autoplay="true" @selected="selectedBanner" />
</view>
</template>
<script>
export default {
data() {
return {
imgList: [ 'imgurl1', 'imgurl2'],
}
},
methods: {
selectedBanner(item, index) {
console.log(`图片链接为:${item}, 下标为${index}`)
},
}
}
</script>
API
cht-swiper Props
属性名 |
类型 |
默认值 |
可选值 |
说明 |
imgList |
String[] |
- |
- |
轮播图图片 |
autoplay |
Boolean |
true |
true 或者 false |
轮播图是否自动播放 |
cht-swiper Events
事件称名 |
说明 |
返回值 |
@selected |
点击图片事件 |
返回 图片链接item 和 图片所在数组的下标index |
- 提示:由于轮播图对自定义宽度、高度要求较少,本次就不再将这些抽象为属性,如有需要,请修改组件源码