更新记录
1.0.2(2024-05-13)
修复1.0.1测试css未删除导致相册背景缺失问题
1.0.1(2024-05-11)
简单优化:增加关闭按钮
下版本:插入视频
1.0.0(2024-04-30)
当前:初版本
下版本优化:混合展示视频文件
查看更多
平台兼容性
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 弓形相册照片墙
简单高性能 分组展示照片墙,支持本地临时路径和网络路径
提示:当前版本仅支持展示图片列表,后面有时间再加入视频。
@啰嗦几句
- 有问题反馈或咨询可入Q群
- 交流群4:413918560 (如满了就加其他群)
- 交流群3:667530868 (如满了就加其他群)
- 交流群2:469580165 (如满了就加其他群)
- 交流群1:701468256 (如满了就加其他群)
- 如都满了就算了,没会员建不了新群了。
- 如插件下方留言,五星必回,其他随缘。
- 小组件开了广告30秒混口饭吃,感谢支持!
Props
属性 |
是否必填 |
值类型 |
默认值 |
说明 |
images |
否 |
Arrar |
[] |
照片集合查看示例 |
foldNum |
否 |
Number |
9 |
图片较多时超过当前行自动折叠,传0等于不折叠 |
show |
否 |
Boolean |
true |
是否显示照片墙 |
zIndex |
否 |
Number |
80 |
照片墙层级(根节点是absolute,如不希望满屏请自行添加relative) |
closeable |
否 |
Boolean |
true |
是否显示关闭图标 |
@Event
名称 |
返回 |
说明 |
close |
void |
点击关闭图标触发 |
Slot
Vue Template示例
<template>
<view>
<lsj-album
:show="show"
:foldNum="9"
:images="images"
@close="show = false"
/>
</view>
</template>
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',
...
]
}
]
}
}
}