更新记录
1.0.0(2026-01-23)
下载此版本
初版
平台兼容性
uni-app(4.75)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
- |
- |
√ |
- |
√ |
√ |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
f-custom-album 自定义相册组件
概述
f-custom-album 是一个用于 读取本地图片/视频资源的自定义相册组件,支持分页加载、多选、图片/视频类型切换、预览与确认操作,适用于 uni-app 项目中需要自定义媒体选择能力的场景。
组件内部基于 这个插件的 queryMedia 函数 能力读取系统相册数据,并可按需解析真实文件路径。
功能说明
- 读取本地图片 / 视频 / 全部媒体资源
- 支持分页加载(无限滚动)
- 支持图片 / 视频类型标签切换
- 支持多选与最大选择数量限制
- 支持已选序号展示
- 支持媒体预览与确认回调
- 支持半屏或自定义高度展示
- 支持主题与布局样式自定义
Props 参数说明
| 参数名 |
类型 |
默认值 |
说明 |
| mediaType |
String |
'all' |
初始媒体类型:image / video / all |
| maxSelect |
Number |
9 |
最大可选数量,0 表示不限制 |
| pageSize |
Number |
48 |
单次分页加载数量 |
| lowerThreshold |
Number |
100 |
滚动触底阈值 |
| halfScreen |
Boolean |
false |
是否以半屏高度展示 |
| height |
String / Number |
'' |
自定义容器高度(px / vh / rpx) |
| enableTypeTabs |
Boolean |
true |
是否启用媒体类型切换标签 |
| typeTabs |
Array |
['all','image','video'] |
允许显示的媒体类型标签 |
| tabLabels |
Object |
{ image:'图片', video:'视频', all:'全部' } |
类型标签文案 |
| showFooter |
Boolean |
true |
是否显示底部操作栏 |
| showPreview |
Boolean |
true |
是否显示预览按钮 |
| previewText |
String |
'预览' |
预览按钮文案 |
| confirmText |
String |
'确定' |
确认按钮文案 |
| resolvingText |
String |
'处理中...' |
路径解析中提示 |
| emptyText |
String |
'暂无内容' |
空状态提示 |
| loadingText |
String |
'加载中...' |
加载中文案 |
| finishedText |
String |
'没有更多了' |
加载完成提示 |
| hintText |
String |
'' |
底部提示文案 |
| showIndex |
Boolean |
true |
是否显示已选序号 |
| resolveFilePath |
Boolean |
true |
是否解析真实文件路径 |
| theme |
Object |
{} |
主题样式配置 |
| layout |
Object |
{} |
布局样式配置 |
Events 事件说明
| 事件名 |
参数 |
说明 |
| change |
{ selectedIds } |
选中项发生变化 |
| preview |
{ list, selectedIds } |
点击预览 |
| confirm |
{ list, selectedIds } |
点击确认 |
使用示例
<f-custom-album
mediaType="image"
:maxSelect="5"
@confirm="onConfirm"
/>
methods: {
onConfirm({ list, selectedIds }) {
console.log(list, selectedIds)
}
}
适用场景
- 自定义图片/视频选择器
- 发布内容前的媒体选择
- 替代系统
chooseImage / chooseVideo 的统一方案