更新记录
1.1(2022-07-19) 下载此版本
无
1.0(2022-07-19) 下载此版本
无
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
有左右按钮的swiper
组件名:woo-swipe
。
1、在uni-swipe的基础上改版。 2、web端和小程序端已测试。 3、有左右选择上一张下一张,自定义样式非常简单。
使用方式:
在 script
中引用组件
import wooSwiper from "@/components/woo-swiper/woo-swiper.vue";
export default {
components:{wooSwiper},
name: 'codeCard',
data() {
return {
list:[
{src:'https://cdn.uviewui.com/uview/demo/transition/fade.png', text:"凭证码:3HDKF7B4SZ"},
{src:'https://cdn.uviewui.com/uview/demo/transition/zoom.png', text:"凭证码:9KSDDF84BD"},
]
};
}
};
在 template
中使用组件
<woo-swiper :list="list"></woo-swiper>
属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
list | Array | - | 数组 |
height | Number | 300 | 高度,单位upx |
width | Number | 300 | 轮播图片宽度,单位upx |
showIndex | boolean | true | 是否显示顶部索引文字 |
easing | String | easeInOutCubic | 指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic(非必需,仅小程序有效) |
list 列表 属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | - | 图片路径 |
text | String | - | 显示文本 |
例如:
[
{src:'https://cdn.uviewui.com/uview/demo/transition/fade.png', text:"凭证码:3HDKF7B4SZ"},
{src:'https://cdn.uviewui.com/uview/demo/transition/zoom.png', text:"凭证码:9KSDDF84BD"},
]
事件说明:
属性名 | 说明 |
---|---|
@change | 切换轮播图时,返回当前图片索引 |
返回数据:
change(index){
// index为当前图片索引
}