更新记录
1.1.0(2026-07-03)
修复ios端部分问题
1.0.4(2026-07-02)
修改说明文档
1.0.3(2026-07-02)
修改LongPressMenu样式
查看更多平台兼容性
uni-app(5.07)
| Vue2 | Vue2插件版本 | Vue3 | Vue3插件版本 | Chrome | Safari | app-vue | app-vue插件版本 | app-nvue | app-nvue插件版本 | Android | Android插件版本 | iOS | iOS插件版本 | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | 1.0.0 | √ | 1.0.0 | × | × | √ | 1.0.0 | √ | 1.0.0 | 5.0 | 1.0.0 | 12 | 1.0.0 | × |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| × | × | × | × | × | × | × | × | × | × | × | × |
uni-app x(5.07)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| - | - | - | - | - | - |
uts-imagePreview API 调用说明
导入
import { previewImage } from '@/uni_modules/gameBoy-imagePreview'
调用
previewImage({
urls: ['https://example.com/image.jpg'],
current: 0, // 默认显示第几张,从0开始
maxZoom: 5, // 最大缩放倍数
tileSize: 1024, // 切片尺寸(超大图模式)
largeImageThreshold: 2048,// 超过此尺寸启用切片
backgroundColor: '#000000',
minimap: { // 缩略图导航配置
enable: true,
position: 'topRight',
size: 120,
},
longPressActions: [ // 长按弹出菜单(默认包含"保存到相册")
{ title: '分享', action: () => console.log('分享') },
],
onClose: () => {},
onChange: (index: number) => {}
})
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| urls | string[] |
— | 必填。图片列表(网络URL/本地路径/APK assets) |
| current | number |
0 |
起始图片索引 |
| maxZoom | number |
5 |
最大缩放倍数 |
| tileSize | number |
1024 |
切片尺寸(px),越大瓦片越少 |
| largeImageThreshold | number |
2048 |
超大图阈值(px),宽或高超过此值启用切片 |
| backgroundColor | string |
'#000000' |
背景色 |
| minimap | MinimapOptions |
— | 缩略图导航配置(见下) |
| longPressActions | LongPressAction[] |
— | 长按弹出菜单项(见下),默认含"保存到相册" |
| onClose | () => void |
— | 关闭回调 |
| onChange | (index: number) => void |
— | 切换图片回调 |
MinimapOptions 缩略图导航配置
缩略图导航类似游戏小地图,缩放图片时在角落显示全图缩略图+当前视口框,支持拖动快速定位。
type MinimapPosition = 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'topCenter' | 'bottomCenter' | 'leftCenter' | 'rightCenter'
type MinimapOptions = {
enable?: boolean // 是否启用,默认 true
position?: MinimapPosition // 位置关键词,默认 'topRight'
x?: number // x 坐标(px),设置后覆盖 position 水平方向
y?: number // y 坐标(px),设置后覆盖 position 垂直方向
size?: number // 尺寸(dp),默认 120
thumbnailUrl?: string // 自定义缩略图地址,不传从原图自动生成
}
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enable | boolean |
true |
是否启用缩略图导航 |
| position | MinimapPosition |
'topRight' |
小窗位置(设置 x/y 后此项失效) |
| x | number |
— | 小窗 x 坐标(px,相对屏幕左上角),设置后覆盖 position |
| y | number |
— | 小窗 y 坐标(px,相对屏幕左上角),设置后覆盖 position |
| size | number |
120 |
小窗尺寸(dp) |
| thumbnailUrl | string |
— | 自定义缩略图地址(http/file/static),不传从原图生成 |
用法示例:
// 1. 默认右上角
previewImage({ urls: [...], minimap: { enable: true } })
// 2. 指定位置关键词
previewImage({ urls: [...], minimap: { position: 'bottomLeft' } })
// 3. 指定绝对坐标
previewImage({ urls: [...], minimap: { x: 20, y: 200 } })
// 4. 自定义缩略图
previewImage({ urls: [...], minimap: { thumbnailUrl: '/static/thumb.png' } })
// 5. 禁用缩略图导航
previewImage({ urls: [...], minimap: { enable: false } })
返回值
const viewer = previewImage({ urls: [...] })
viewer?.close() // 主动关闭预览
返回 ImagePreviewResult 对象,包含 close() 方法。

收藏人数:
购买源码授权版(
试用
赞赏(0)
下载 5
赞赏 0
下载 12505033
赞赏 1941
赞赏
京公网安备:11010802035340号