更新记录

1.0.2(2024-05-13)

修复1.0.1测试css未删除导致相册背景缺失问题

1.0.1(2024-05-11)

简单优化:增加关闭按钮 下版本:插入视频

1.0.0(2024-04-30)

当前:初版本 下版本优化:混合展示视频文件

查看更多

平台兼容性

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

lsj-album 弓形相册照片墙

简单高性能 分组展示照片墙,支持本地临时路径和网络路径

提示:当前版本仅支持展示图片列表,后面有时间再加入视频。

@啰嗦几句

  1. 有问题反馈或咨询可入Q群
  2. 交流群4:413918560 (如满了就加其他群)
  3. 交流群3:667530868 (如满了就加其他群)
  4. 交流群2:469580165 (如满了就加其他群)
  5. 交流群1:701468256 (如满了就加其他群)
  6. 如都满了就算了,没会员建不了新群了。
  7. 如插件下方留言,五星必回,其他随缘。
  8. 小组件开了广告30秒混口饭吃,感谢支持!

Props

属性 是否必填 值类型 默认值 说明
images Arrar [] 照片集合查看示例
foldNum Number 9 图片较多时超过当前行自动折叠,传0等于不折叠
show Boolean true 是否显示照片墙
zIndex Number 80 照片墙层级(根节点是absolute,如不希望满屏请自行添加relative)
closeable Boolean true 是否显示关闭图标

@Event

名称 返回 说明
close void 点击关闭图标触发

Slot

name 说明
close 自定义关闭图标

Vue Template示例

<template>
    <view>
        <lsj-album 
        :show="show" 
        :foldNum="9" 
        :images="images"
        @close="show = false"
        />
    </view>
</template>

images数据示例

JS

export default {
    data() {
        return {
            show: false,
            images: [
                {
                    title: '美丽的图片离不开精辟的标题',
                    value: [
                        'https://img0.baidu.com/it/u=148131753,649968631&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F146a652cj00s9lh240012d000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F81282461j00s9lh24001gd000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2024%2F03%2F2207%2F281291804_4_20240322073231879.png&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716949477&t=23acdfa2666281fb227814009966558b',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2Fe291600bj00s9lh24000sd000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://img2.baidu.com/it/u=850708730,1816402586&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=713',
                        'https://img.bugela.com/uploads/2021/07/20/c983b757be16d130b034f6cdb1d5a86f.jpg',
                        'https://img0.baidu.com/it/u=148131753,649968631&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F146a652cj00s9lh240012d000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F81282461j00s9lh24001gd000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2024%2F03%2F2207%2F281291804_4_20240322073231879.png&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716949477&t=23acdfa2666281fb227814009966558b',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2Fe291600bj00s9lh24000sd000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://img2.baidu.com/it/u=850708730,1816402586&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=713',
                        ...
                    ]
                },
                {
                    title: '懒得写弹框动画了,需要的自己外面套吧~',
                    value: [
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F81282461j00s9lh24001gd000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F146a652cj00s9lh240012d000hs00qnm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                        ...
                    ]
                }
            ]
        }
    }
}

隐私、权限声明

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

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

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

许可协议

MIT协议

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