Skip to content

使用建议

1.x 已停止维护,仅保留文档供仍在使用的项目查阅。新项目请使用 2.x,已有项目可参考 从 1.x 升级。

移动规则 ​

按下方向键时,vuEPG 根据元素在屏幕上的位置(getBoundingClientRect())选出下一个焦点。

1. 确定候选范围 ​

候选范围是当前焦点所在 EPGGroup 的第一层子节点(EPGItem 与 EPGGroup),每次导航时从当前 DOM 读取。不包括当前焦点自身和被隐藏的元素;position: fixed 的可见元素也可参与导航。子节点中的 EPGGroup 被当作一个整体参与比较。

当前焦点不属于任何分组时,以整个页面作为一个虚拟分组,候选范围为页面顶层的节点。

2. 按方向筛选 ​

以向下为例(其余方向对称):

  1. 只保留上边缘低于当前焦点上边缘的候选;
  2. 将这些候选分为两类:
    • 重叠:与当前焦点在水平方向上有重叠(判断时当前焦点两侧各向内收缩 5%);
    • 完全越过:与当前焦点在水平方向上没有重叠,并且上边缘低于当前焦点的下边缘;
  3. 其余候选排除。

3. 选出最近的 ​

  • 存在重叠的候选时,在其中选择上边缘最靠上(距离最近)的;
  • 否则,在完全越过的候选中选择上边缘最靠上的;
  • 距离相同时,选择左边缘与当前焦点左边缘最接近的。

4. 逐层向外 ​

以上两类都没有候选时,以当前焦点所在的 EPGGroup 整体为起点,在上一层分组中重复第 1 ~ 3 步,直到页面顶层。

5. 落点 ​

  • 目标是 EPGItem:直接获得焦点;
  • 目标是 EPGGroup:焦点落在组内带有 default 标识的节点上,没有时落在第一个节点上;该节点仍是 EPGGroup 时继续向内进入。
  • 目标分组没有子节点时,不移动焦点。

TIP

2.x 的移动规则在此基础上修复了若干问题,并提供了可交互的示意图,见 2.x 移动规则。

基于 MIT 许可发布 · 支持项目