Viewer媒体查看器

2025-07-30 23:52:33首发，1个月前更新

viewer媒体查看器可全屏查看多媒体文件，包括图片、视频、音频、地图、iframe以及其他可嵌入的平台链接。

Viewer媒体查看器1个月前更新 Viewer库: 更多特性和示例 需2金币1个月前更新 Viewer库：如何使用侧边栏 需4金币1个月前更新 Viewer库: content参数详细用法和嵌入其他平台的方法 需6金币1个月前更新

前言

媒体查看器基于Swipe模块实现，主要用于全屏查看图片、视频、音频、iframe等媒体文件，其功能和特点包括：

支持多种按钮样式
支持多种内容格式
支持自定义工具箱
支持混合内容结构
支持缩略图使用
支持多套样式，可自定义主题
支持媒体文件懒加载，提升执行效率

基本用法

只需在图片节点上添加ax-viewer属性即可创建媒体查看器

媒体查看器默认行为如下：

不自动播放 - 通过拖拽或导航进行内容切换
双击媒体文件会自动缩放至预设尺寸(2x)，可拖动查看细节，鼠标滚轮亦可缩放（此时会禁用拖拽切换功能）
再次双击可恢复初始尺寸并重新启用拖拽切换功能

Output
HTML

```
                
                
            
```

也可以通过id+new方式创建媒体查看器

参数target接收按钮节点选择器；参数content接收媒体文件URL

Output
HTML
JS

```
                
                
            
```

                
                new ax.Viewer({
                    target:'#demo0001',
                    content:'https://unpkg.com/orcares/image/earth01.jpg'
                })

手动创建

通过show()方法，用户可以自定义媒体查看器的创建时机和显示方式

Output
HTML
JS

```
                
                
            
```

                
                let ins;
                demo0002.onclick = ()=>{
                    if(ins)return;
                    ins = new ax.Viewer({
                            content:'https://unpkg.com/orcares/image/earth01.jpg'
                        });
                }
                demo0003.onclick = ()=>{
                    ins && ins.show();
                }