更新记录

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) 下载此版本

初始化

查看更多

平台兼容性

Vue2 Vue3
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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问