更新记录

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 的统一方案

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。