Appearance
(Vue)JsView功能列表
本文档对应开发包版本, 2.3.826。
本文档按应用场景归纳 @shijiu/jsview-vue 与 @shijiu/jsview-vue-plus 提供的组件能力。样例路由定义于 node_modules/@shijiu/jsview-vue-samples/DemoHomepage/router.js（及 MetroWidgetDemos/routeList.js、DemoForOperator/routeList.js）。组件与工具以 jsview-vue 包 index 导出为准。
关联在线样例可访问 示例（建议右键在新标签中打开）。
使用说明
- 场景简述：几个词概括要解决什么问题。
- 场景详述：该场景的典型需求与实现要点。
- 涉及组件：
jsview-vue/jsview-vue-plus的index导出的组件名或 API 名。 - 样例位置：相对于
node_modules/@shijiu/jsview-vue-samples/的实际代码路径（同 component 多路由时不重复写）。 - 视觉链接：在线样例超链接（
sampleUrl+ 路由名），链接文字为「样例位置」并附路由meta.nameText（括号内）；同代码多路由只留一条。
相似场景（组件与用途接近）已合并为一项；标注「仅测试」的路由、以及路由文件中已注释掉的样例不列入。依据包内node_modules/@shijiu/jsview-vue-samples/的 AI_Check_Rules.txt：只收录DemoHomepage/router.js、MetroWidgetDemos/routeList.js、DemoForOperator/routeList.js 中的有效路由。若多个路由的 component 指向同一份代码，则「样例位置」与「样例链接」只保留一处（优先 feature / Operations / Game，去掉 operator 别名）。
一、焦点与导航
1. MetroWidget 平铺导航
| 字段 | 内容 |
|---|---|
| 场景简述 | 海报墙平铺导航 |
| 场景详述 | 电视/机顶盒界面中，用按键上下左右在多个 item 间移动焦点；适用于 EPG、运营位、剧集列表等平铺布局。 |
| 涉及组件 | MetroWidget、JsvFocusBlock、useFocusHub |
| 样例位置 | MetroWidgetDemos/minimalUsage/、MetroWidgetDemos/basic/、MetroWidgetDemos/direction/ |
| 视觉链接 | MetroWidgetDemos/minimalUsage/ (最简用法) MetroWidgetDemos/basic/ (basic) MetroWidgetDemos/direction/ (direction) |
2. MetroWidget 滚动策略
| 字段 | 内容 |
|---|---|
| 场景简述 | 列表滚动翻页 |
| 场景详述 | 内容超出可视区域时的无缝滚动、整页滚动、居中滚动、首屏不滚动、左右非对齐滚动等策略配置。 |
| 涉及组件 | MetroWidget |
| 样例位置 | MetroWidgetDemos/slideSetting/、MetroWidgetDemos/SeamlessSlide/（剧集翻页）、MetroWidgetDemos/PingPong/ |
| 视觉链接 | MetroWidgetDemos/slideSetting/ (slideSetting) MetroWidgetDemos/SeamlessSlide/ (剧集翻页) MetroWidgetDemos/PingPong/ (乒乓模式) |
3. MetroWidget 不规则排版
| 字段 | 内容 |
|---|---|
| 场景简述 | 不规则 item 顺序 |
| 场景详述 | layoutType = relative 时，item 可按非线性顺序排列与导航。 |
| 涉及组件 | MetroWidget |
| 样例位置 | MetroWidgetDemos/basic2/ |
| 视觉链接 | MetroWidgetDemos/basic2/ (不规则排版顺序样例) |
4. MetroWidget 焦点放大防裁剪
| 字段 | 内容 |
|---|---|
| 场景简述 | 放大焦点防裁剪 |
| 场景详述 | 焦点 item 放大后超出 MetroWidget 边界被裁切时，通过 padding 预留空间。 |
| 涉及组件 | MetroWidget |
| 样例位置 | MetroWidgetDemos/padding/ |
| 视觉链接 | MetroWidgetDemos/padding/ (padding) |
5. MetroWidget 动态 item 尺寸
| 字段 | 内容 |
|---|---|
| 场景简述 | 聚焦撑开邻项 |
| 场景详述 | 横排列表中聚焦 item 放大并将两侧 item 推开；或竖向分类列表抽屉式展开；运营「resize」样例演示获焦展开大卡、收起小卡的推挤切换。 |
| 涉及组件 | MetroWidget |
| 样例位置 | MetroWidgetDemos/itemSizeUpdate/、MetroWidgetDemos/ListExpand/、DemoForOperator/Resize/ |
| 视觉链接 | MetroWidgetDemos/itemSizeUpdate/ (item尺寸更新) MetroWidgetDemos/ListExpand/ (列表展开) DemoForOperator/Resize/ (resize) |
6. MetroWidget 嵌套与跨区域焦点
| 字段 | 内容 |
|---|---|
| 场景简述 | 多层列表焦点切换 |
| 场景详述 | 多层 MetroWidget 嵌套后，焦点在子列表间就近移动；适用于 EPG 左侧 tab + 右侧多楼层联动。 |
| 涉及组件 | MetroWidget、SpatialNavProvider |
| 样例位置 | MetroWidgetDemos/SpatialNav/、MetroWidgetDemos/EpgFlowListType/ |
| 视觉链接 | MetroWidgetDemos/SpatialNav/ (焦点就近移动) MetroWidgetDemos/EpgFlowListType/ (EPG-瀑布流) |
7. MetroWidget 数据刷新
| 字段 | 内容 |
|---|---|
| 场景简述 | 列表数据热更新 |
| 场景详述 | 数据源变化后刷新 MetroWidget 内容并保持焦点状态。 |
| 涉及组件 | MetroWidget |
| 样例位置 | MetroWidgetDemos/RefreshDemo/ |
| 视觉链接 | MetroWidgetDemos/RefreshDemo/ (数据刷新demo) |
8. MetroWidget 骨架图加速
| 字段 | 内容 |
|---|---|
| 场景简述 | 海报骨架图 |
| 场景详述 | 海报平铺场景下开启骨架图，避免复杂 item 阻塞按键；配合海报组件实现加载淡出。 |
| 涉及组件 | MetroWidget、JsvPosterDiv、JsvPosterImage |
| 样例位置 | MetroWidgetDemos/SkeletonDiagram/ |
| 视觉链接 | MetroWidgetDemos/SkeletonDiagram/ (骨架图) |
9. 跨组件焦点框漂移
| 字段 | 内容 |
|---|---|
| 场景简述 | 焦点框跨列表漂移 |
| 场景详述 | 独立 .9 焦点框跟随多个 MetroWidget 间焦点移动，配合 jsvGetBoundingClientRect 获取位置并触发 transition。 |
| 涉及组件 | JsvNinePatch、MetroWidget、JsvFocusBlock |
| 样例位置 | MetroWidgetDemos/ninePatchFocusPage/、NinePatchDemo/ |
| 视觉链接 | MetroWidgetDemos/ninePatchFocusPage/ (.9焦点漂移效果页面) NinePatchDemo/ (.9图焦点框漂移) |
10. 离散焦点自动寻焦
| 字段 | 内容 |
|---|---|
| 场景简述 | 离散块自动寻焦 |
| 场景详述 | 界面上散布多个 JsvFocusBlock，导航键未拦截时由框架按布局自动切换焦点；适合简单不重叠布局，不适合复杂 EPG。 |
| 涉及组件 | JsvFocusBlock |
| 样例位置 | DispersedFocusControl/ |
| 视觉链接 | DispersedFocusControl/ (离散焦点自动处理) |
11. 焦点层级与遮挡
| 字段 | 内容 |
|---|---|
| 场景简述 | 焦点项层级提升 |
| 场景详述 | item 视觉遮挡（负坐标延展）时，聚焦项 zIndex 提升以确保焦点可见。 |
| 涉及组件 | MetroWidget |
| 样例位置 | MetroWidgetDemos/zIndex/ |
| 视觉链接 | MetroWidgetDemos/zIndex/ (焦点层级) |
12. MetroWidget gaze 与 focus
| 字段 | 内容 |
|---|---|
| 场景简述 | 凝视与焦点回调区分 |
| 场景详述 | 对比 MetroWidget item 的 onGaze/onIgnore 与 onFocus/onBlur：后者依赖 widget 处于焦点树获焦；前者在 widget 未获焦时仍可随凝视/关注变化触发。适用于鼠标/凝视与按键焦点并存的界面。 |
| 涉及组件 | MetroWidget、useFocusHub |
| 样例位置 | MetroWidgetDemos/gazeFocusDiff/（路由 metroWidget/gazeVsFocus） |
| 视觉链接 | MetroWidgetDemos/gazeFocusDiff/ (gaze vs focus) |
13. MetroWidget 剧集列表
| 字段 | 内容 |
|---|---|
| 场景简述 | 分组剧集选择 |
| 场景详述 | 上方剧集 item 列表 + 下方分组 tab 的双层 MetroWidget 联动，按组分页展示大量分集入口，适用于详情页选剧集。 |
| 涉及组件 | MetroWidget、useFocusHub |
| 样例位置 | DemoForOperator/EpisodeList/ |
| 视觉链接 | DemoForOperator/EpisodeList/ (剧集列表) |
二、布局
14. Flex 区域布局
| 字段 | 内容 |
|---|---|
| 场景简述 | Flex 子项对齐 |
| 场景详述 | 区域内 flex 排列与对齐；JsvFlexDiv 仅支持一层子 flex，多层需 JsvFlexCell 嵌套。 |
| 涉及组件 | JsvFlexDiv、JsvFlexCell |
| 样例位置 | FlexCellDemo/（路由名 FlexDemo） |
| 视觉链接 | FlexCellDemo/ (FlexDemo) |
15. 全屏自适应对齐
| 字段 | 内容 |
|---|---|
| 场景简述 | 非 16:9 屏自适应 |
| 场景详述 | 非 16:9 屏幕上内容居中、贴角对齐；背景铺满 + 内容居中是常见组合。 |
| 涉及组件 | JsvScreenFlex |
| 样例位置 | FullScreenFlex/（路由名 ScreenFlex） |
| 视觉链接 | FullScreenFlex/ (ScreenFlex) |
三、焦点(框)与动效
16. .9 图焦点框
| 字段 | 内容 |
|---|---|
| 场景简述 | .9 图绘制焦点框 |
| 场景详述 | 用 .9 图绘制可拉伸焦点框；可配合代码生成圆角边框纹理，或叠加圆角矩形阴影（FrameShadow）。多种运营焦点框样式见「运营焦点框动效合集」。 |
| 涉及组件 | JsvNinePatch、JsvTextureStoreApi、JsvFlexDiv |
| 样例位置 | NinePatchTester/、NinePatchDemo/、DemoForOperator/FrameShadow/ |
| 视觉链接 | NinePatchTester/ (NinePatch对齐测试) NinePatchDemo/ (.9图焦点框漂移) DemoForOperator/FrameShadow/ (焦点框阴影) |
17. 焦点框旋转光效
| 字段 | 内容 |
|---|---|
| 场景简述 | 旋转光圈焦点框 |
| 场景详述 | 用 plus 包 RotateFrame 展示持续旋转光圈焦点框（内部组合纹理动画与 .9 图），可设圆角、线宽与光晕遮罩。是JsvNinePatch的进一步封装, 使用更简单 |
| 涉及组件 | RotateFrame（@shijiu/jsview-vue-plus / FrameBorder） |
| 样例位置 | TextureAnimation/App3.vue |
| 视觉链接 | TextureAnimation/App3.vue (焦点框旋转光效果) |
18. 纯色/渐变焦点框
| 字段 | 内容 |
|---|---|
| 场景简述 | 代码绘制焦点框 |
| 场景详述 | 不依赖外部图片资源，用 plus 包 StaticFrame（纯色描边）与 GradientFrame（渐变描边）绘制焦点框，支持四角不同圆角。是JsvNinePatch的进一步封装, 使用更简单 |
| 涉及组件 | StaticFrame、GradientFrame（@shijiu/jsview-vue-plus / FrameBorder） |
| 样例位置 | TextureAnimation/App4.vue |
| 视觉链接 | TextureAnimation/App4.vue (StaticFrame与GradientFrame) |
19. 焦点晃动/边缘提示
| 字段 | 内容 |
|---|---|
| 场景简述 | 焦点框晃动提示 |
| 场景详述 | 到达边缘或需提示焦点位置时，用 plus 包 JsvKeyFrameDiv 对焦点框施加抖动/晃动动画；可用 JsvKeyFrameCache 预建 keyframe，并支持 animate() / stop() 与连按间隔控制。 |
| 涉及组件 | JsvKeyFrameDiv、JsvKeyFrameCache（@shijiu/jsview-vue-plus） |
| 样例位置 | KeyFrameTester/DivShake.vue |
| 视觉链接 | KeyFrameTester/DivShake.vue (Div晃动动画) |
20. Tab 焦点爬虫动画
| 字段 | 内容 |
|---|---|
| 场景简述 | Tab 伸缩切换 |
| 场景详述 | Tab 区域焦点以伸缩方式横向移动（爬虫效果），并支持内容展开/折叠。 |
| 涉及组件 | getKeyFramesGroup、JsvFocusBlock |
| 样例位置 | FocusMoveStyle/、DemoForOperator/TabContent/、DemoForOperator/TabContentVertical/ |
| 视觉链接 | FocusMoveStyle/ (焦点移动样式) DemoForOperator/TabContent/ (tab-content) DemoForOperator/TabContentVertical/ (纵向爬虫) |
21. 运营焦点框动效合集
| 字段 | 内容 |
|---|---|
| 场景简述 | 多种焦点框动效 |
| 场景详述 | 运营海报列表中演示可切换的焦点框样式：代码绘制圆角描边、旋转光圈（含光晕，RotateFrame）、明暗呼吸、获焦扫光等；获焦时 item 放大并展示对应动效。 |
| 涉及组件 | MetroWidget、JsvNinePatch、JsvTextureStoreApi、JsvTextureAnim、RotateFrame（@shijiu/jsview-vue-plus / FrameBorder） |
| 样例位置 | DemoForOperator/Focus/ |
| 视觉链接 | DemoForOperator/Focus/ (焦点框样式) |
四、图片与海报
22. 海报展示与淡入
| 字段 | 内容 |
|---|---|
| 场景简述 | 海报加载淡出 |
| 场景详述 | 图片未加载时显示占位图，加载完成后淡出；适用于运营海报、霸屏等。 |
| 涉及组件 | JsvPosterDiv、JsvPosterImage、JsvSmartDiv、JsvSmartImage |
| 样例位置 | MetroWidgetDemos/SkeletonDiagram/、DemoForOperator/FullscreenIn/、DemoForOperator/PosterAnim/、DemoForOperator/PosterOverflow/ |
| 视觉链接 | MetroWidgetDemos/SkeletonDiagram/ (骨架图) DemoForOperator/FullscreenIn/ (霸屏海报淡入效果落地效果) DemoForOperator/PosterAnim/ (海报强调动画) DemoForOperator/PosterOverflow/ (焦点海报多层叠加突出效果) |
23. AB 图切换防闪烁
| 字段 | 内容 |
|---|---|
| 场景简述 | AB 图无闪烁切换 |
| 场景详述 | 按钮等 AB 图（静图/动图组合）切换时，B 图加载完成后再切换，比全量 Preload 更省内存。 |
| 涉及组件 | JsvPosterImage、JsvPosterDiv（srcList 属性） |
| 样例位置 | ABImageAlt/ |
| 视觉链接 | ABImageAlt/ (AB图片切换) |
24. 图片预加载
| 字段 | 内容 |
|---|---|
| 场景简述 | 预加载防切换闪 |
| 场景详述 | 将目标图片 bitmap 预载入内存，与 JsvPreload 组件生命周期绑定，解决 AB 图切换闪动。 |
| 涉及组件 | JsvPreload |
| 样例位置 | Preload/ |
| 视觉链接 | Preload/ (预加载) |
25. 图片预下载
| 字段 | 内容 |
|---|---|
| 场景简述 | 文件预下载缓存 |
| 场景详述 | 预下载图片到本地缓存（不解码），优化后续加载；不宜过量以免缓存被顶掉。 |
| 涉及组件 | JsvPreDownloader |
| 样例位置 | JsvPreDownloader/、Preload/（组合使用） |
| 视觉链接 | JsvPreDownloader/ (下载接口示例) Preload/ (预加载) |
26. 海报内存优化
| 字段 | 内容 |
|---|---|
| 场景简述 | 海报省内存 |
| 场景详述 | 通过 RGB_565 颜色空间或缩小 Texture 尺寸降低内存；预加载时配置须与 img 标签一致。 |
| 涉及组件 | JsvPosterImage、JsvPreload |
| 样例位置 | ColorSpace/、TextureSize/ |
| 视觉链接 | ColorSpace/ (设置颜色空间) TextureSize/ (制定Texture尺寸) |
27. 同步解码
| 字段 | 内容 |
|---|---|
| 场景简述 | 同步解码同帧绘制 |
| 场景详述 | JsvPosterImage 设 syncDraw=true，已下载图片阻塞渲染至解码完成，避免与其他内容不同步；须先预下载。 |
| 涉及组件 | JsvPosterImage、JsvPreDownloader |
| 样例位置 | SyncDecode/ |
| 视觉链接 | SyncDecode/ (同步解码) |
28. 代码生成纹理
| 字段 | 内容 |
|---|---|
| 场景简述 | 手搓图片资源 |
| 场景详述 | 用 Canvas 绘制生成 backgroundImage / img 可用的临时 URL；含圆角框、半圆、渐变块等子场景。 |
| 涉及组件 | JsvTextureStoreApi、JsvNinePatch |
| 样例位置 | TextureStoreTest/、GradientTexture/ |
| 视觉链接 | TextureStoreTest/ (TextureStore测试) GradientTexture/ (渐变Texture) |
29. 图片主色调提取
| 字段 | 内容 |
|---|---|
| 场景简述 | 取图主色配色 |
| 场景详述 | 对预加载或截图 texture 调用 JsvTextureStoreApi.getDominantColor，提取主色用于背景/边框等联动配色。 |
| 涉及组件 | JsvTextureStoreApi、JsvPreload |
| 样例位置 | DemoForOperator/DominantColor/ |
| 视觉链接 | DemoForOperator/DominantColor/ (主色调) |
30. div 截图与 Blob
| 字段 | 内容 |
|---|---|
| 场景简述 | 截图/Blob 展示 |
| 场景详述 | 对 div 截图生成 blob/texture 或快照，用 div/img 展示；或截图后做页面级缩放过渡（ScreenShootScale）。 |
| 涉及组件 | BlobApi、JsvTextureStoreApi、getKeyFramesGroup |
| 样例位置 | ScreenToBlob/、BakeViewDemo/、BlobLoadTest/、DemoForOperator/ScreenShootScale/ |
| 视觉链接 | ScreenToBlob/ (截图Blob) BakeViewDemo/ (div快照功能) BlobLoadTest/ (Blob加载测试) DemoForOperator/ScreenShootScale/ (截图缩放) |
五、文字排版
31. 多行文字区域对齐
| 字段 | 内容 |
|---|---|
| 场景简述 | 多行文字对齐 |
| 场景详述 | 多行纯文本在区域内居中/居左/居右；不可用 JsView 不支持的 CSS 居中属性。 |
| 涉及组件 | JsvTextBox |
| 样例位置 | TextBox/、TextSizeLimit/ |
| 视觉链接 | TextBox/ (多行文字区域内对齐) TextSizeLimit/ (文字大小限制) |
32. 文字跑马灯
| 字段 | 内容 |
|---|---|
| 场景简述 | 标题跑马灯 |
| 场景详述 | 超长标题横向滚动展示。 |
| 涉及组件 | JsvMarquee |
| 样例位置 | Marquee/ |
| 视觉链接 | Marquee/ (文字滚动(标题跑马灯)) |
33. 焦点放大文字清晰
| 字段 | 内容 |
|---|---|
| 场景简述 | 放大文字不模糊 |
| 场景详述 | 焦点项 scale3d 放大后，配合 JsvScaleTextBox 保持文字清晰。 |
| 涉及组件 | JsvScaleTextBox |
| 样例位置 | TextScale/ |
| 视觉链接 | TextScale/ (焦点放大文字清晰度) |
34. 长文本滚动阅读
| 字段 | 内容 |
|---|---|
| 场景简述 | 长文滚动+进度条 |
| 场景详述 | 用户协议等长文本滚动窗口，右侧进度条联动；支持触控拖动、fling、进度条跳转、鼠标滚轮。 |
| 涉及组件 | JsvScrollBox、JsvScrollFollow |
| 样例位置 | LongText/、LongTextLatex/ |
| 视觉链接 | LongText/ (长文字) LongTextLatex/ (长文字Latex) |
35. LaTeX 与富文本
| 字段 | 内容 |
|---|---|
| 场景简述 | LaTeX/富文本排版 |
| 场景详述 | 文本内局部变色、加粗、斜体、下划线、删除线；数学公式；长文混排 LaTeX。智能体的 SSE 对话用 Markdown 最合适；长聊天框样例演示气泡流式追加与上下键滚动。若不需要数学公式，可不加载 JsvLatex 插件以保持轻量。 |
| 涉及组件 | JsvTextBox、JsvLatex、Markdown |
| 样例位置 | LatexDemo/、LongTextLatex/、Markdown/、DemoForOperator/LongChatBox/ |
| 视觉链接 | LatexDemo/ (latex示例) LongTextLatex/ (长文字Latex) Markdown/ (MD+LaTex) DemoForOperator/LongChatBox/ (长聊天框) |
36. 文字阴影
| 字段 | 内容 |
|---|---|
| 场景简述 | 文字阴影效果 |
| 场景详述 | JsView 支持的 text-shadow 写法演示；勿使用未列出的 CSS 属性。 |
| 涉及组件 | div（标准 HTML 元素） |
| 样例位置 | TextShadowDemo/ |
| 视觉链接 | TextShadowDemo/ (文字阴影) |
37. 文字分行探测
| 字段 | 内容 |
|---|---|
| 场景简述 | 文字分行后处理 |
| 场景详述 | 探测文字行数并对每行做后处理。 |
| 涉及组件 | TextTools |
| 样例位置 | BreakLinesApi/ |
| 视觉链接 | BreakLinesApi/ (分行API) |
38. Dom 文本渲染
| 字段 | 内容 |
|---|---|
| 场景简述 | Dom 片段渲染 |
| 场景详述 | 后台下发的 dom 文本片段按浏览器式排版显示。支持标签：div、p、ul、ol、li、button、table、thead、tbody、tfoot、tr、td、th、img、span、a、strong、em、sup、sub、br。 |
| 涉及组件 | JsvDomRenderer |
| 样例位置 | DomRenderer/ |
| 视觉链接 | DomRenderer/ (Dom文本渲染) |
六、图表与可视化
39. 饼图/环形图
| 字段 | 内容 |
|---|---|
| 场景简述 | 饼图数据展示 |
| 场景详述 | 绘制饼图或环形图，支持比例变化动画；各项之和不可大于 100%。 |
| 涉及组件 | JsvPieChart、JsvSector |
| 样例位置 | SecTorTest/ |
| 视觉链接 | SecTorTest/ (饼图测试) |
40. 雷达图
| 字段 | 内容 |
|---|---|
| 场景简述 | 多指标雷达图 |
| 场景详述 | 评分体系下多维度指标可视化。 |
| 涉及组件 | JsvRadarChart |
| 样例位置 | JsvRadarChart/ |
| 视觉链接 | JsvRadarChart/ (雷达图) |
41. 连接线与脑图
| 字段 | 内容 |
|---|---|
| 场景简述 | 树状图连线 |
| 场景详述 | 树状关系图、脑图连线；Z 字形弯折可为圆弧；斜线无锯齿。 |
| 涉及组件 | JsvConnectLine、JsvLine、JsvMindMap |
| 样例位置 | ConnectLine/、JsvLine/、MindMap/ |
| 视觉链接 | ConnectLine/ (连接线Demo) JsvLine/ (JsvLine示例) MindMap/ (思维导图示例) |
42. 二维折线统计图
| 字段 | 内容 |
|---|---|
| 场景简述 | 折线/区域图 |
| 场景详述 | 折线或曲线二维统计图，可绘制闭合区域。 |
| 涉及组件 | div + Canvas 绘制 |
| 样例位置 | CanvasDrawChart/ |
| 视觉链接 | CanvasDrawChart/ (二维统计图样例) |
43. 二维码生成
| 字段 | 内容 |
|---|---|
| 场景简述 | 字符串转二维码 |
| 场景详述 | 同步/异步生成二维码，支持中心图标与容错级别。 |
| 涉及组件 | JsvQrcode |
| 样例位置 | QrcodeDemo/ |
| 视觉链接 | QrcodeDemo/ (二维码) |
七、轮播与滚动展示
44. 平面轮播图
| 字段 | 内容 |
|---|---|
| 场景简述 | 多图横向轮播 |
| 场景详述 | 单运营位多图滚动切换；含平滑轮播变体。 |
| 涉及组件 | JsvSwiper、JsvSwiper2、JsvSmoothSwiper |
| 样例位置 | Swiper/、DemoForOperator/SmoothSwiper/ |
| 视觉链接 | Swiper/ (滚动图) DemoForOperator/SmoothSwiper/ (平滑轮播图) |
45. 3D 透视轮播
| 字段 | 内容 |
|---|---|
| 场景简述 | 3D 透视轮播 |
| 场景详述 | 全屏多图横向滚动，带近大远小透视感。 |
| 涉及组件 | JsvSwiper3D |
| 样例位置 | SwiperTest/ |
| 视觉链接 | SwiperTest/ (Swiper3dTest) |
八、视觉特效
46. 粒子特效
| 字段 | 内容 |
|---|---|
| 场景简述 | 粒子撒花拖尾 |
| 场景详述 | 拖尾、撒花等粒子效果；低端设备约 1500 点流畅。 |
| 涉及组件 | JsvSpray |
| 样例位置 | SprayView/、SprayMove/、DemoForOperator/Particle/ |
| 视觉链接 | SprayView/ (粒子效果) SprayMove/ (烟花行进特效) DemoForOperator/Particle/ (粒子喷洒组件) |
47. 水波背景特效
| 字段 | 内容 |
|---|---|
| 场景简述 | 背景水波纹 |
| 场景详述 | 静态背景图上的 3D 水波效果（PC 模拟环境可能无效果）。 |
| 涉及组件 | JsvRipple |
| 样例位置 | Ripple/、DemoForOperator/Ripple/ |
| 视觉链接 | Ripple/ (水波特效) DemoForOperator/Ripple/ (水波组件) |
48. 动图帧控制
| 字段 | 内容 |
|---|---|
| 场景简述 | webp/gif 帧控制 |
| 场景详述 | 控制 webp/gif 播放区间、播放次数等。 |
| 涉及组件 | JsvApic、JsvApic2 |
| 样例位置 | AnimPicture/、DemoForOperator/AnimPic/ |
| 视觉链接 | AnimPicture/ (动图控制) DemoForOperator/AnimPic/ (动图) |
49. 精灵图动画
| 字段 | 内容 |
|---|---|
| 场景简述 | 雪碧图动画 |
| 场景详述 | 用精灵图展示 2D 游戏式帧动画或静图。 |
| 涉及组件 | JsvSpriteAnim、JsvSpriteStatic |
| 样例位置 | SpriteImage/、DemoForOperator/Sprite/、DemoForOperator/ClickSpriteAnim/ |
| 视觉链接 | SpriteImage/ (精灵图) DemoForOperator/Sprite/ (精灵图组件(动图)) DemoForOperator/ClickSpriteAnim/ (点击动画) |
50. 3D 透视舞台
| 字段 | 内容 |
|---|---|
| 场景简述 | 区域 3D 透视 |
| 场景详述 | 指定区域内设置透视，子元素 transform 带 z 轴时有近大远小效果；Jsv3dDiv 边缘抗锯齿。 |
| 涉及组件 | Jsv3dStage、Jsv3dDiv |
| 样例位置 | Poster3d/ |
| 视觉链接 | Poster3d/ (3d移动动画) |
51. 界面一键置灰
| 字段 | 内容 |
|---|---|
| 场景简述 | 公祭日黑白 |
| 场景详述 | 对 div 整体应用滤镜，实现公祭日黑白等运营置灰。 |
| 涉及组件 | JsvFilterView |
| 样例位置 | FilterDemo/、DemoForOperator/GrayFilter/ |
| 视觉链接 | FilterDemo/ (公祭日黑白效果) DemoForOperator/GrayFilter/ (公祭日黑白屏) |
52. 背景高斯模糊
| 字段 | 内容 |
|---|---|
| 场景简述 | 背景模糊开孔 |
| 场景详述 | 静态背景高斯模糊，多区域共享同一张模糊 texture。 |
| 涉及组件 | JsvRevealLayer |
| 样例位置 | BackLayerReveal/ |
| 视觉链接 | BackLayerReveal/ (背景高斯模糊示例) |
53. 拼图蒙版
| 字段 | 内容 |
|---|---|
| 场景简述 | 不规则蒙版拼图 |
| 场景详述 | 单图 + 不规则蒙版模板实现拼图或夸张海报切换。 |
| 涉及组件 | JsvMaskClipDiv |
| 样例位置 | MaskClip/、SceneTransition/、DemoForOperator/Jigsaw/ |
| 视觉链接 | MaskClip/ (拼图demo) SceneTransition/ (场景过渡(拼图式)) DemoForOperator/Jigsaw/ (拼图组件) |
54. 进度条
| 字段 | 内容 |
|---|---|
| 场景简述 | 圆角/直角进度条 |
| 场景详述 | 展示直角或圆角进度条。 |
| 涉及组件 | JsvProgressBar |
| 样例位置 | ProgressBar/ |
| 视觉链接 | ProgressBar/ (进度条) |
55. 虚线框强调
| 字段 | 内容 |
|---|---|
| 场景简述 | 虚线框/斜虚线 |
| 场景详述 | 段落线框强调，支持斜线虚线。 |
| 涉及组件 | JsvDashPath |
| 样例位置 | DashPath/、DashPath/AppForOperator.vue |
| 视觉链接 | DashPath/ (虚线框测试用例) DashPath/AppForOperator.vue (虚线框) |
56. 春节/运营主题特效
| 字段 | 内容 |
|---|---|
| 场景简述 | 节日运营动效 |
| 场景详述 | 春联、灯笼、鞭炮、烟花、全屏春节布局，以及清明雨景等节假日主题背景板组合特效。 |
| 涉及组件 | JsvFreeMoveActor、getKeyFramesGroup、JsvSpray、JsvRipple 等 |
| 样例位置 | CoupletsTest/、SpringFestival/、DemoForOperator/ChunLian/、DemoForOperator/Banger/、DemoForOperator/Firework1/、TombSweepingDayTest/ |
| 视觉链接 | CoupletsTest/ (春节组件) SpringFestival/ (全屏春联特效) DemoForOperator/ChunLian/ (春联、对联组件) DemoForOperator/Banger/ (鞭炮组件) DemoForOperator/Firework1/ (礼花组件) TombSweepingDayTest/ (情景主题效果:雨) |
57. 特殊效果运营位
| 字段 | 内容 |
|---|---|
| 场景简述 | 特殊效果运营位 |
| 场景详述 | 虹吸（整页/单海报）、漩涡、粒子收放、翻页、翻书、弹跳、推箱等单海报或整页过渡动画；PosterPacker 合集可切换 vortex/genie/particle 收放。 |
| 涉及组件 | JsvFreeMoveActor、JsvMaskClipDiv、JsvFragShaderView、JsvSpray、BookFlip 等 |
| 样例位置 | DemoForOperator/Genie/、DemoForOperator/Vortex/、DemoForOperator/FlipPage/、DemoForOperator/BookFlip/、DemoForOperator/Bounce/、DemoForOperator/Stretch/、DemoForOperator/Genie2/、PosterPacker/ |
| 视觉链接 | DemoForOperator/Genie/ (虹吸组件 整页) DemoForOperator/Vortex/ (漩涡组件 单海报/整页) DemoForOperator/FlipPage/ (翻页效果(整体页面)) DemoForOperator/BookFlip/ (翻书) DemoForOperator/Bounce/ (弹跳动画) DemoForOperator/Stretch/ (推箱效果组件) DemoForOperator/Genie2/ (虹吸组件 单海报) PosterPacker/ (海报图收放组件) |
58. PAG 动画插件
| 字段 | 内容 |
|---|---|
| 场景简述 | PAG 动效播放 |
| 场景详述 | 通过 @shijiu/jsview-vue-plus 的 JsvPag 播放 PAG 动画（SharedTexture），支持多实例、播放/暂停、显示隐藏、尺寸与资源切换；依赖 Android 端 JsvPag 插件。 |
| 涉及组件 | JsvPag、globalLoadJsvPagPlugin、MetroWidget |
| 样例位置 | PagDemo/ |
| 视觉链接 | PagDemo/ (JsvPag插件) |
九、视频与 Native 层
59. Native 视频挖洞
| 字段 | 内容 |
|---|---|
| 场景简述 | 露出底层视频层 |
| 场景详述 | 指定区域透过显示系统 video 层，父节点移动时实时通知 native 位置变化。 |
| 涉及组件 | JsvNativeSharedDiv、JsvTransparentDiv（同组件别名） |
| 样例位置 | TestNativeSharedView/ |
| 视觉链接 | TestNativeSharedView/ (NativeSharedView测试) |
60. 可视区域监控
| 字段 | 内容 |
|---|---|
| 场景简述 | 移出屏停播 |
| 场景详述 | 监控 div 是否可视，移出屏幕时停止视频/动画，移回时恢复；适用于 EPG 滑动中的视频窗。 |
| 涉及组件 | JsvVisibleSensor |
| 样例位置 | VisibleSensorDemo/ |
| 视觉链接 | VisibleSensorDemo/ (可视化变化通知) |
十、触控与鼠标
61. Div 点击与触控
| 字段 | 内容 |
|---|---|
| 场景简述 | Div 触控响应 |
| 场景详述 | 单 div 追加点击；复杂触控用 jsvSetTapListener。 |
| 涉及组件 | div（jsvSetTapListener 扩展） |
| 样例位置 | ClickDivDemo/ |
| 视觉链接 | ClickDivDemo/ (点击Div) |
62. MetroWidget 触控
| 字段 | 内容 |
|---|---|
| 场景简述 | 列表触控事件 |
| 场景详述 | MetroWidget 激活触控并接收事件；可用蒙层屏蔽触控与鼠标。 |
| 涉及组件 | MetroWidget、JsvTouchModeSwitcher |
| 样例位置 | TouchWidget/ |
| 视觉链接 | TouchWidget/ (触控示例) |
63. 拖拽轨迹监测
| 字段 | 内容 |
|---|---|
| 场景简述 | 触控拖动轨迹 |
| 场景详述 | 监测 div 拖动轨迹，或全屏 JsvDragBox 监测滑动手势。 |
| 涉及组件 | JsvDragBox |
| 样例位置 | DragBox/ |
| 视觉链接 | DragBox/ (DragBox) |
64. 可拖拽进度条
| 字段 | 内容 |
|---|---|
| 场景简述 | 触控进度条 |
| 场景详述 | 视频进度条等可触控拖动场景；JsvScrollBox Pin 模式 + JsvScrollFollow 联动。 |
| 涉及组件 | JsvScrollBox、JsvScrollFollow |
| 样例位置 | ScrollBoxTest/ |
| 视觉链接 | ScrollBoxTest/ (可拖拽进度条) |
65. 鼠标 Hover
| 字段 | 内容 |
|---|---|
| 场景简述 | 鼠标悬停检测 |
| 场景详述 | div 响应 @mouseenter / @mouseleave。 |
| 涉及组件 | div |
| 样例位置 | Hover/ |
| 视觉链接 | Hover/ (Hover) |
十一、音频与输入
66. 短音效播放
| 字段 | 内容 |
|---|---|
| 场景简述 | 点击短音效 |
| 场景详述 | 播放 mp3/ogg 短音（建议 ≤200KB、≤1s），可与背景音混播；更长音频用流式播放器。 |
| 涉及组件 | JsvSoundPool、JsvAudio |
| 样例位置 | SoundPool/、DemoForOperator/Sound/ |
| 视觉链接 | SoundPool/ (SoundPool) DemoForOperator/Sound/ (声音-跳动) DemoForOperator/Sound/ (声音-下雨) DemoForOperator/Sound/ (声音-焦点移动) |
67. 系统输入法
| 字段 | 内容 |
|---|---|
| 场景简述 | IME 文字输入 |
| 场景详述 | 与 Android IME 通讯接收输入；平板常见，电视较少使用。 |
| 涉及组件 | JsvInput |
| 样例位置 | Input/ |
| 视觉链接 | Input/ (文字输入) |
十二、路由与运行时
68. Hash 路由
| 字段 | 内容 |
|---|---|
| 场景简述 | 盒端 Hash 路由 |
| 场景详述 | 盒端与浏览器均可用、等价于 WebHashHistory 的 jsvCreateHashHistory；读取 URL 参数与 deepLink。 |
| 涉及组件 | jsvCreateHashHistory |
| 样例位置 | HashParams/、DemoHomepage/router.js |
| 视觉链接 | HashParams/ (Hash参数) |
69. 元素屏幕坐标
| 字段 | 内容 |
|---|---|
| 场景简述 | 获取绘制位置 |
| 场景详述 | 异步获取 div 相对屏幕的位置与尺寸（含 transform、keyframe 影响）。 |
| 涉及组件 | div（jsvGetBoundingClientRect 扩展） |
| 样例位置 | GetBoundingClientRect/ |
| 视觉链接 | GetBoundingClientRect/ (GetRect示例) |
70. 空闲降帧
| 字段 | 内容 |
|---|---|
| 场景简述 | 无操作降帧率 |
| 场景详述 | 长时间无用户操作后降低帧率以防过热，有操作时恢复。 |
| 涉及组件 | window.JsvCoreApi（JsView 运行时 API） |
| 样例位置 | FpsLimit/ |
| 视觉链接 | FpsLimit/ (帧率限制) |
71. 基础 HTML/CSS
| 字段 | 内容 |
|---|---|
| 场景简述 | 标签与 CSS 兼容 |
| 场景详述 | div、img 及 JsView 兼容 CSS、transition/transform 简单动画。 |
| 涉及组件 | div、img（标准 HTML 元素） |
| 样例位置 | Basic/ |
| 视觉链接 | Basic/ (基础示例合集) |
十三、运动与物理引擎
72. FreeMoveActor 可编程运动
| 字段 | 内容 |
|---|---|
| 场景简述 | div 可预制编程位移控制 |
| 场景详述 | 用 JsvFreeMoveActor/JsvFreeMoveDiv 对 div 设置可暂停的往复运动、边界、触碰交互与复合减速动作；亦可实现地板跳跃（碰撞即停）或无限滚轴类游戏化场景。 |
| 涉及组件 | JsvFreeMoveActor、JsvFreeMoveDiv、FreeMoveApis、JsvEnvBlocker |
| 样例位置 | FreeMove/、FreeMove/ImpactStop/、FreeMoveGame/ |
| 视觉链接 | FreeMove/ (FreeMove示例) FreeMove/ImpactStop/ (碰撞即停) FreeMoveGame/ (FreeMoveGame示例) |
73. 碰撞检测
| 字段 | 内容 |
|---|---|
| 场景简述 | View 相交检测 |
| 场景详述 | 用 JsvOverlapTest + OverlapApis 监听两个碰撞体 join/leave，支持平移/旋转/缩放/倾斜变换；常与 FreeMove 运动场景组合做命中判定。 |
| 涉及组件 | JsvOverlapTest、OverlapApis |
| 样例位置 | Collision/ |
| 视觉链接 | Collision/ (碰撞检测) |
74. Box2D 物理引擎
| 字段 | 内容 |
|---|---|
| 场景简述 | 刚体物理交互 |
| 场景详述 | @shijiu/jsview-vue-plus 的 Physics / JsvPhysics 插件（Box2D）演示两球碰撞、落槽、移动平台、台球开球、跑酷跳跃、碰撞分组等；需加载 android上的JsvPhysics插件，所以PC浏览器上运行的JsView环境不可用。 |
| 涉及组件 | Physics、globalLoadJsvPhysicsPlugin |
| 样例位置 | JsvPhysicsDemo/ |
| 视觉链接 | JsvPhysicsDemo/ (JsvPhysics 物理仿真) |