更新记录

1.0.2(2023-09-04)

urls图片数组中,图片url对应属性的key配置

1.0.1(2023-08-29)

增加属性说明

1.0.0(2023-08-29)

无限循环轮播头像

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × ×

a-avatars

用法

<template>
    <view>
    <!-- urls数组 -->
        <a-avatar-slideshow :urls="urls"> </a-avatar-slideshow>
        <!-- urls对象 -->
        <a-avatar-slideshow :urls="urlsObj"> </a-avatar-slideshow>
        <!-- 设置宽高 -->
        <a-avatar-slideshow :urls="urlsObj" width="100" height="100"></a-avatar-slideshow>
        <!-- overlap头像重叠部分大小 -->
        <a-avatar-slideshow :urls="urlsObj" width="100" height="100" :overlap="50"></a-avatar-slideshow>
        <!-- interval轮播时间间隔 -->
        <a-avatar-slideshow :urls="urlsObj" width="100" height="100" :interval="1000"></a-avatar-slideshow>
        <a-avatar-slideshow :urls="urlsObjProp" width="100" height="100" :interval="1000" :prop="{url: 'header'}"></a-avatar-slideshow>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                urlsObj: [
                    { id: '11', url: 'https://p.qqan.com/up/2023-7/202371914533633.jpg'},
                    { id: '212', url: 'https://p.qqan.com/up/2023-7/202371914533633.jpg'},
                    { id: '112', url: 'https://img.huimin111.com/uploads/img/20210609/3138bb99e34be076556ae950206ab206.jpg'},
                ],
                urlsObjProp: [
                    { id: '11', header: 'https://p.qqan.com/up/2023-7/202371914533633.jpg'},
                    { id: '212', header: 'https://p.qqan.com/up/2023-7/202371914533633.jpg'},
                    { id: '112', header: 'https://img.huimin111.com/uploads/img/20210609/3138bb99e34be076556ae950206ab206.jpg'},
                ],
                urls: [
                    'https://img.huimin111.com/uploads/img/20210609/3138bb99e34be076556ae950206ab206.jpg',
                    'https://p.qqan.com/up/2023-7/202371914533633.jpg',
                    'https://p.qqan.com/up/2023-7/202371914533633.jpg',
                    'https://p.qqan.com/up/2023-7/202371914533633.jpg'
                ]
            }
        }
    }
</script>

属性说明:

属性名 类型 默认值 说明
urls Array [] 图片数组
width Number 50
height Number 50
overlap Number 50 头像重叠部分大小
interval Number 50 轮播时间间隔
prop Object {url: 'url'} urls图片数组中,图片url对应属性的key

隐私、权限声明

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

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

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

许可协议

MIT协议

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