更新记录
2.0.1(2022-03-11)
下载此版本
新增属性
1.autoplay 是否是否自动切换
2.interval 自动切换时间间隔
3.duration 滑动动画时长
2.0.0(2022-02-19)
下载此版本
失踪人口回归系列,本以为该插件没多少人使用,但是是不是都会有使用者给予肯定的评论,所以突发奇想将插件升级一下(主要也是基于评论区提出的一些问题),作者本人可以说非常不负责任了0.0,还望大家见谅,哈哈,自己的业务需求有和本插件不一样的地方可以自行修改。最后谢谢大家对该插件的肯定和意见。回见
1.0.0(2019-11-28)
下载此版本
初始化
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
× |
× |
√ |
× |
× |
× |
× |
支持 easycom 可以免引用、注册
参数
参数 |
说明 |
类型 |
默认值 |
可选值 |
imgList |
展示的图片列表 需要展示的数据和下方示例结构不一样可使用下方 customizeDisplayField 属性进行配置 |
Array |
[ ] |
- |
currentImg |
默认展示图片索引 |
Number |
0 |
- |
isShowSmallImgs |
是否需要展示小图 |
Boolean |
true |
false |
customizeDisplayField |
自定义展示字段,如果imgList是对象数组,可使用此属性进行配置。例:imgList:[{url:'../../images/banner1.png'},....] 那么想要展示图片为每一条数据里面的url字段就只需要将当前字段配置为url,如果还有下一层,{urlObj:{url:'../images/banner1.png'}} 那么当前参数可以写成urlObj.url来指定绑定的字段 |
String |
'' |
- |
autoplay |
是否自动切换 |
Boolean |
false |
true |
interval |
自动切换时间间隔(毫秒) |
[Number,String] |
5000 |
- |
duration |
滑动动画时长(毫秒) |
[Number,String] |
500 |
- |
事件
事件名 |
说明 |
回调参数 |
@change |
图片左右切换时触发该方法 |
(item,index)会返回当前展示的对象和索引 |
使用示例
<template>
<view>
<imgsBanner-tag :imgList='imgList' autoplay duration='500' interval="5000" :currentImg='currentImg' :isShowSmallImgs='true' customizeDisplayField='url' @change='onChange'></imgsBanner-tag>
</view>
</template>
<script>
export default {
data() {
imgList: [
{url:'../../static/grid/banner1.png'},
{url:'../../static/grid/banner2.png'},
{url:'../../static/grid/banner3.png'},
{url:'../../static/grid/banner4.png'},
],
currentImg: 0, //默认展示
},
methods:{
onChange(item,index){
console.log(item)
console.log(index)
}
}
}
</script>