更新记录
1.0.0(2024-01-09) 下载此版本
2014-01-09初次提交
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
超好看banner
代码简单,极易修改
安装
在市场导入zfy-banner的uni_modules版本的即可,无需import
属性说明
属性名 类型 默认 说明 indicatorDots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 interval Number 2000 自动切换时间间隔(单位ms) duration Number 500 轮播图滑动动画时长 transitionDuration Number 2 过渡效果的时长(单位s) current Number 0 当前所在滑块的 index height Number, String 350 轮播图高度,可输入字符串但是一定要带单位,默认单位是px list ObjectArray 有 轮播图数据
使用示例
页面
<template>
<view class="content">
<zfy-banner @confirm="confirm" @change="change" :list='list'></zfy-banner>
</view>
</template>
script:
<script>
export default {
data() {
return {
list: [{
image: "https://cgj-1312410549.cos.ap-chengdu.myqcloud.com/admin/scroll_image/wash_car_fore4134.png ",
bgImage: "https://cgj-1312410549.cos.ap-chengdu.myqcloud.com/admin/scroll_image/experience_officer_back7715.png",
page: "/pages/index/index",
}, {
image: "https://cgj-1312410549.cos.ap-chengdu.myqcloud.com/admin/scroll_imgs/experience_officer_fore.png",
bgImage: "https://cgj-1312410549.cos.ap-chengdu.myqcloud.com/admin/scroll_image/wash_car_back3286.png",
page: "/pages/order/order",
}]
}
},
onLoad() {
},
methods: {
change(e) {
console.log(e, 515);
},
confirm(e) {
console.log(e);
}
}
}
</script>