更新记录
1.2.0(2024-06-18)
下载此版本
修复第二组相册预览不正常问题,修复小图片被标题挡住时点击无法预览以及回调函数返回数据不正常问题,更新请知悉:(因click回调容易误触发为普通事件,所以回调事件由click改为onClick)
1.1.1(2024-06-18)
下载此版本
修复第二组相册预览不正常问题,修复小图片被标题挡住时点击无法预览以及回调函数返回数据不正常问题,更新请知悉:(因click回调容易误触发为普通事件,所以回调事件由click改为onClick)
1.1.0(2024-06-05)
下载此版本
优化和问题修复
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
lsj-album 弓形相册照片墙
简单高性能 分组展示照片墙,支持本地临时路径和网络路径
提示:当前版本仅支持展示图片列表,后面有时间再加入视频。
@啰嗦几句
有问题反馈或咨询可入Q群(要点脸,MD文档屏蔽Q群号几个意思?)
-4139-185-60 如满了就加其他群
-6675-308-68 如满了就加其他群
-4695-801-65 如满了就加其他群
-7014-682-56 如满了就加其他群
如都满了就算了,没会员建不了新群。
Props
属性 |
是否必填 |
值类型 |
默认值 |
说明 |
list |
否 |
Arrar |
[] |
照片集合查看示例 |
field |
否 |
String |
'url' |
list.value为对象数组时的图片字段key,例[{value:{url:'http...'}}] |
bigPicture |
否 |
Boolean |
true |
是否显示大图 |
foldNum |
否 |
Number |
9 |
图片较多时超过多少张自动折叠并显示余数,传0等于不折叠 |
background |
否 |
String |
'#333' |
相册背景色 |
round |
否 |
String |
'0px' |
图片边框圆角 |
preview |
否 |
Boolean |
true |
点击图片是否打开预览 |
position |
否 |
String |
relative |
相册定位模式,默认relative,无特殊情况建议使用默认值 |
zIndex |
否 |
Number |
1 |
照片墙层级,默认1,无特殊情况建议使用默认值 |
@Event
名称 |
返回 |
说明 |
click |
any |
点击图片触发,返回当前列 |
Vue Template示例
<template>
<view>
<lsj-album
background="#fff"
round="10rpx"
field="url"
:foldNum="9"
:bigPicture="false"
:preview="true"
:list="list[tabIndex]"
@click="clickalbum"
/>
</view>
</template>
JS
export default {
data() {
return {
show: false,
images: [
{
title: '美丽的图片离不开精辟的标题',
value: [
// 支持非对象方式
'https://img0.baidu.com/it/u=,&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%2F146a652cj00s9lhd000hs00qnm.jpg&thumbnail=660x&quality=80&type=jpg',
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2Fj00s9lhgd000hs00qnm.jpg&thumbnail=660x&quality=80&type=jpg',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2024%2F03%2F2207%2F_4_.png&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=23acdfafb2278b',
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2Febj00s9lhsd000hs00qnm.jpg&thumbnail=660x&quality=80&type=jpg',
'https://img2.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=713',
// 支持对象方式,注意:field需与对象内图片key一致
{ url: 'https://ww1.sinaimg.cn/mw690/60ed0cf7ly1hp6s4mnl59j20u01t1k28.jpg'},
{ url: 'https://ww4.sinaimg.cn/mw690/008rOMXAgy1hom3fmylzmj313u1z2akp.jpg'},
{ url: 'https://ww1.sinaimg.cn/mw690/60ed0cf7ly1hp6s4n5peoj20u01t1wv7.jpg'},
{ url: 'https://wx1.sinaimg.cn/mw690/b3b42fe1gy1hpq9ja81chj20yi22o43z.jpg'},
{ url: 'https://wx4.sinaimg.cn/mw690/006xJGFdly1hptqlliahbj32hl5djnpd.jpg'},
{ url: 'https://ww4.sinaimg.cn/mw690/9f4cb4b9gy1hpeopw0x9uj20rs1o6q7d.jpg'},
{ url: 'https://img2.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'},
{ url: 'https://img0.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7d6f9419-cae4-4935-a7a6-150dccf979a2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=d5fae6215ad7c9871f0e58f90b75cb1f'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F6e6ad601-a5b4-4ab6-b512-7e67c8ccf604%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=1105de5ce2aca7a226c4ff281'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc81caf8e-7504-41eb-b63e-b98f8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=bef18ef0e96aa1bab9e08724d9'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fccb90cb7-0a2d-4a68-b41f-bff7201%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=4bd9eddf5fba1cd0437fc189bc4a0d30'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F97ac0862-d51e-41db-a2de-3ed7e3ecdc87%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=aec0141b0ab9fb8a3540df4872'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2e39f371-b8b9-4863-bb08-e5d66cacfdfb%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=c00f0426c5e1ebbb'},
{ url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0eb-f43f-4d55-8290-00e0c6a1a671%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,&q=a80&n=0&g=0n&fmt=auto?sec=&t=2d4b61d6ea13f8a0ea0c59ef12aacb31'},
{ url: 'https://ww1.sinaimg.cn/mw690/006cSilvgy1hoziqne3wsj30xv0yaqlh.jpg'},
{ url: 'https://wx1.sinaimg.cn/mw690/005XpTbZly1hpkp71sqhyj30u00u0t9w.jpg'},
{ url: 'https://ww3.sinaimg.cn/mw690/cly1hped47ujslj21jk1jk4ah.jpg'},
]
},
{
title: '懒得写弹框动画了,需要的自己外面套吧~',
value: [
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2Fj00s9lhgd000hs00qnm.jpg&thumbnail=660x&quality=80&type=jpg',
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0229%2F146a652cj00s9lhd000hs00qnm.jpg&thumbnail=660x&quality=80&type=jpg',
]
}
]
}
}
}