github地址:https://github.com/simpleRobort/TV-Focus.js

这个库运用非常的简单，简单使用就3步，适用于用原生写TV端需求的前端，即使从来没开发过TV端的看完基本使用也可以掌握,非常好用！

最新更新：进一步支持异步添加dom，详情见II.8

I.基本使用

1.预先写好页面，保证你所有能够获取焦点的dom元素拥有一个统一开头的id 一般为 “item?”,其中?为数字，从0开始,上不封顶
        <!--     保证元素拥有定位     -->
<div class="dom" id="item0" style="position: absolute;left:200px;top:200px;width:150px;height:150px">这是第个0dom</div>
<div class="dom" id="item1" style="position: absolute;left:400px;top:200px;width:150px;height:150px">这是第个1dom</div>
<div class="dom" id="item2" style="position: absolute;left:600px;top:200px;width:150px;height:150px">这是第个2dom</div>
<div class="dom" id="item3" style="position: absolute;left:200px;top:400px;width:150px;height:150px">这是第个3dom</div>
<div class="dom" id="item4" style="position: absolute;left:400px;top:400px;width:150px;height:150px">这是第个4dom</div>
<div class="dom" id="item5" style="position: absolute;left:600px;top:400px;width:150px;height:150px">这是第个5dom</div>

对应css:

        .focus {
            border: 2px solid #0f0f0f; /*这里就是获取焦点的实现原理了，Focus.js会给获取焦点的元素添加一个名字叫做 focus 的class类*/
        }
2.从源码里下载focus.js(点击下载)，在你的html页面中引入
<script src="./focus.js"></script>
3.在引入之后创建一个script标签，new一个FOCUS对象并且传入参数
<script>
        var vm = new FOCUS({
            focusId: 'item3', // 页面首先获取焦点的dom元素的Id,不传默认item0
            event: {
                keyOkEvent: function (focusId) {
                    console.log("点击了确认键，当前获得焦点的索引为：" + focusId)
                    switch (focusId) {
                        case 0:
                           
                            break
                    }
                },
                keyBackEvent: function (focusId) {
                    console.log("点击了返回键，当前获得焦点的索引为：" + focusId)
                    switch (focusId) {
                        case 6:
                        case 7:
                            
                            break
                    }
                }
            }
        })

</script>

到这里最简单的焦点移动已经被添加好了，你就可以打开页面看效果了

基本使用测试地址

II.进阶使用

1.使用后代选择器显示隐藏图片与dom元素

基本使用里我们只是简单的给focus添加了一个边框，非常的简便，但是当我们需要通过焦点与否显示不同的图片的时候，只是简单的给focus添加边框并不够用，这时候就需要css的后代选择器了

css:

.dom .select {
  position: absolute; /*需要添加定位，不然会被未选中显示的内容挤下去*/
  display: none; /*未被选中时隐藏选中才显示的内容*/
}

.dom .unselect {
  display: block; /*未获取焦点时显示没被选中需要显示的内容*/
}

.focus .select {
  display: block; /*获取焦点时显示被选中的需要显示的内容*/
}

.focus .unselect {
  visibility: hidden; /*获取焦点时隐藏未被选中需要显示的内容*/
}

html:

<!-- 以下图片为本地数据，如复制使用请修改-->
<div id="bg">
    <div class="dom" id="item0" style="position: absolute;left:890px;top:100px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/gengduo.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/gengduo.png" alt=""></div>
    </div>
    <div class="dom" id="item1" style="position: absolute;left:200px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/1.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/1.png" alt=""></div>
    </div>
    <div class="dom" id="item2" style="position: absolute;left:500px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/2.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/2.png" alt=""></div>
    </div>
    <div class="dom" id="item3" style="position: absolute;left:800px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/3.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/3.png" alt=""></div>
    </div>
    <div class="dom" id="item4" style="position: absolute;left:200px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/4.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/4.png" alt=""></div>
    </div>
    <div class="dom"  id="item5" style="position: absolute;left:500px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/5.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/5.png" alt=""></div>
    </div>
    <div class="dom"  id="item6" style="position: absolute;left:800px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/5.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/5.png" alt=""></div>
    </div>
</div>

js:

   var vm = new FOCUS({
        focusId: 'item3', // 页面首先获取焦点的dom元素的Id
        event: {
            keyOkEvent: function (focusId) {
                console.log("点击了确认键，当前获得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 0:

                        break
                }
            },
            keyBackEvent: function (focusId) {
                console.log("点击了返回键，当前获得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 6:
                    case 7:

                        break
                }
            }
        }
    })
使用后代选择器示例地址
2.使用强制焦点变换 (forceMove)

适用的场景一般有两个：

1.你需要这个元素按某一个方向键不切换焦点或者切换到自己想要的焦点（哪怕隔了一座山哈哈）

2.你的ui设计稿非常的不规律（焦点默认的逻辑无法满足需求，焦点默认移动的逻辑是以dom的宽高位置发射一道射线，第一个触碰到的dom元素就会成为下一个焦点）

[外链图片转存中…(img-HNlaAbQA-1698736855957)]

显然没有别的元素的话，这个两个元素无法相互跳转，有人问我为什么不把判定范围改大一点，我也试过，自然是解决了，但是有更多的问题出现了，我这就不一一举例了哈哈，
回到正题，使用方法很简单，只需要在new FOCUS传入的对象里新增一个属性focusMove即可

var vm = new FOCUS({
            focusId: 'item3',
            forceMove: {
                // 需要被强制的焦点id:[上，左，下，右]
                item0: [-1,-1,"item1",-1],
                item1: ["item0",-1,-1,-1],
            }
        })

forceMove也是一个对象，需要传入属性，属性值为一个数组，依次为方向键上左下右，参数有三种取值，如下

取值描述
-1不做处理，随框架判断逻辑自动切换焦点
-2禁止移动，即使对应的方向有焦点
其他dom的id强制移动到对应的dom
3.事件处理 (event)

tv端除了上下左右方向键与数字键，还有其他的事件，这里也提供了api

 var vm = new FOCUS({
        focusId: 'item3',
        event: {
            keyOkEvent: function (focusId) {
                console.log("点击了确认键，当前获得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 0:

                        break
                }
            },
            changeIndexBeforeFind: function (dir,focusId) {
                // 两个传参(dir代表方向：上左下右依次为0123,当前焦点id)
                // Focus会在自动寻找下一个焦点前触发这个事件，如果这个函数返回了一个指定索引
                // 那么框架就不会浪费时间去寻找下一个焦点，直接使用你返回的索引
                // 例：
                if (dir == 3 && focusId == 0) {
                    return 2
                } 
                // 当在焦点索引为0的dom按下 右方向键，返回一个索引2，框架会放弃计算
                // 直接让索引为2的获取焦点
            },
            changeIndexAfterFind: function (dir,focusId,nextId) {
                 // 三个传参(前两个同上，nextId为计算完成的焦点，如果没有合适的焦点就会返回-1)
                 // Focus会在寻找完焦点后触发这个事件，如果这个函数返回了一个指定索引
                 // 那么框架就抛弃本来应该成为焦点的nextId，直接使用你返回的索引
           
             },
            
        }
    })
事件名称(都是函数,如上)描述
keyNumberEvent遥控器数字点击，有两个传参:(对应的数字，当前获取焦点的索引)
keyOkEvent遥控器确认键，有一个传参(当前获取焦点的索引)
keyBackEvent遥控器返回键，有一个传参(当前获取焦点的索引)
focusEvent获取焦点后事件，有一个传参(当前获取焦点的索引)
unfocusEvent失去焦点后事件，有一个传参(失去焦点的索引)
darkFocusEvent获取暗焦点后事件，有一个传参(失去焦点的索引)
undarkFocusEvent失去暗焦点后事件，有一个传参(失去焦点的索引)
changeIndexBeforeFind按任意方向键后触发，详情见上图
changeIndexAfterFind按任意方向键后触发，详情见上图
4.二级以上页面 (pageState)

当页面有若干个焦点是在触发某一个事件才能够被获取焦点的，在事件未触发时不应该被获取焦点，如果通过上面的强制事件频繁的添加-2，那可太麻烦了，这时候就pageState就出现了

使用方法：

 var vm = new FOCUS({
        pageState: {
                // 特殊焦点:页面索引(默认为1)
                item4: 2,
                item5: 2
            },
    })
二级以上页面demo地址

设置完以后，item4只能与item5互相移动，因为默认所有的焦点pagestate都是1，pagestate不同不会通过方向键选中，只能通过requireFocus切换焦点

5.方法 (methods)

为了尽量使页面的核心代码保存在FOCUS传参内，添加了类似vue的methods来方便代码管理

使用方法：

 var vm = new FOCUS({
        methods: {
                    handleTest: function () {
                        console.log("你点击了methods")
                    }
                },
         event: {
                  keyOkEvent: function (focusId) {
                      this.handleTest()
                  }
              }
    })

传参时传入一个methods对象，用来保存方法，this指向Focus，也通过this.方法名来调用methods内部方法

methods示例地址
5.暗焦点 (darkFocus)

tv端经常会有一个需求，页面上会有多个焦点，比如说一个节目，你可能会需要其他的焦点来表示当前所属于的分类，我们称之为暗焦点

 var vm = new FOCUS({
        darkFocus:[[1,0,2,3,4],[5,6,7,8]], //暗焦点列表一个数组包含多个数组，参数为id后的索引，代表这几个dom为一块暗焦点，并且数组第一个索引为默认选中的暗焦点
        darkGroup:[true,true], // 长度与darkFocus对应，代表每次进入暗焦点列表时，是否始终让这个列表的暗焦点被选中
        darkClass: "active", // 暗焦点被添加的class ,默认就是 active
        event: {
            darkFocusEvent: function (id) {
                // 你有可能会需要在焦点切换时根据当前的分类渲染新数据，
                // 我们希望你使用的是这个事件而不是focusEvent
                // 这是为了防抖,在暗焦点没改变时重复获焦不会重复触发这个事件
                console.log("获取暗焦点",id) 
            },
            undarkFocusEvent: function (id) {
                console.log("丢失暗焦点",id)
            },
            focusEvent: function (id) {
                console.log("获取焦点",id)
            },
            unfocusEvent: function (id) {
                console.log("丢失焦点",id)
            },
        }
    })
6.运用各api完成一个tv端常见demo (demo)

tv最多的就是多级栏目的需求，在焦点切换时，对应的子列表，子节目都要发生变化，本文章主要介绍框架的使用，
故具体内容可下载源码与focus文件了解

示例图片

demo地址
7.生命周期 (生命周期)

按目前的需求引入了一个初始创建时的生命周期created

使用方式:

 var vm = new FOCUS({
         created: function (next) {
             this.addDiv()
             next() //必须调用， 不调用无法库就不执行初始化
         },
         methods: {
             addDiv: function () {
                 var div = document.createElement("div")
                 div.classList = "dom"
                 div.id = "item6"
                 var newContent = document.createTextNode("生命周期添加的dom");
 
                 div.appendChild(newContent);
 
                 document.body.appendChild(div);
             }
         }
     })
demo地址
8.异步添加 (appendActionEvent)

简单的实现一个异步添加dom的正确使用方式

使用方式:

    var box = document.getElementById("box"); // 异步添加dom的容器
    var btn = document.getElementById("btn"); // 点击按钮开始异步添加
    var itemCount = 2; // 初始化页面有两个焦点，所以count从2开始

    var focus = new FOCUS({
      event: {
        keyOkEvent: function (id) {
          alert("点击了初始添加的焦点，id为" + id);
        },
      },
    });

    btn.onclick = function () {
      setTimeout(function () {
        // 模拟数据
        var arr = [
          { id: 400, txt: "焦点2 异步添加" },
          { id: 401, txt: "焦点3 异步添加" },
          { id: 402, txt: "焦点4 异步添加" },
        ];
        // 纪录当前添加焦点的起始索引
        let startCount = itemCount;
        let str = "";

        // 拼装dom
        for (var i = 0; i < arr.length; i++) {
          str += `<div id="item${itemCount}">${arr[i].txt}</div>`;
          itemCount++;
        }

        // 渲染dom
        box.innerHTML += str;

        //调用refresh函数重新抓取焦点
        focus.refresh();

        // 为添加的焦点区间添加事件
        focus.appendActionEvent(
          // 第一个参数代表需要为这次添加的焦点匹配新确认事件的区间
          // 例： [2，5],焦点2到焦点5之间的焦点的点击会触发新事件(包括焦点2和5)
          [startCount, itemCount - 1], 
          // 新事件函数，action参数为事件类型，目前支持的类型如下
          // ok：点击确认键/回车键
          // back： 点击返回键/空格键
          // number： 点击数字按键
          // focusId：为当前的焦点id，当action是number时，第三个参数number代表点击的数字
          function (action, focusId, number) {
            alert("异步焦点触发事件，时间名称为" + action + ",id为" + focusId);
          },
          // 该参数代表触发新事件后是否还需要触发默认事件，支持boolean或者数组
          // 例：true代表该区间的三个action事件不会触发初始化focus的事件函数
          // 例： ['back','ok']代表点击返回或者确认键时，
          // 触发完新事件后不会触发默认的keyOkEvent活着keyBackEvent，
          // 但是点击数字键时依旧会触发新事件和默认事件
          ['back']
        );
      }, 500);
    };
demo地址
周期名称传参描述
creatednext提供一个next方法，在调用后库才会继续抓取页面的焦点并且初始化,此时能访问methods里的方法

III new FOCUS传参

var vm = new FOCUS({ })

传参为一个对象，其中对象内部的属性如下:

属性名称类型描述
domIdNamestring统一id,默认为"item",如希望统一id为 (“focusDom0”、“focusDom1”…),即该参数值为 “focusDom”
focusIdstring需要首先聚焦的id，默认索引为0的元素
focusClassstring聚焦dom增加的class,默认为"focus"
pageStateint设置页面等级，详情参考II.4
forceMoveobject修改dom的方向键逻辑，详情参考II.2
eventobject按键处理事件,详情参考II.3
methodsobject方法保存，类似vue的methods,详情参考II.5
darkFocusarray暗焦点，在焦点在别处时依旧显示特殊样式,每个数组第一个索引为默认选中的暗焦点,详情参考II.6
darkClassstring暗焦点被添加的class ,默认就是 active,详情参考II.6
darkGrouparray长度与darkFocus对应，代表每次进入暗焦点列表时，是否始终让这个列表的暗焦点被选中,详情参考II.6
unFocusArrarray数组，数组可以有多个id索引，代表初始不允许被选中的焦点，之后可用下面介绍的 openFocus 解除禁止被选中

IV 框架的Api

使用方法：

在实例内部使用: 示例：this.requireFocus(0)

在实例外部使用: 示例：vm.requireFocus(0) (vm为实例对象)

        var vm = new FOCUS({
            event: {
                keyOkEvent: function (focusId) {
                    this.requireFocus(6) // 在实例内部使用
                }
            }
        })
        vm.requireFocus(6) // 在实例外部使用
Api名称传参数量传参描述
requireFocus1number使元素获取焦点，传参为索引值,例(使id为"item2"的元素获取焦点)：this.requireFocus(2)
appendActionEvent3区间数组:[1,2] 调用函数:function(action,当前焦点id) {} 是否阻止默认的事件:stopPropagation区间数组为完全匹配，例如[1,2]，当前焦点在1和2之间时会调用第二个传参函数(包括1和2)
stopPropagation为boolean或者数组，代表是否阻止指定事件或者所有事件，目前只提供三个可拦截的事件(number: 数字按键、ok：回车键/确认键、back：返回键/空格键) 详情可见 II.8
log4(后三个参数可不传)打印内容，字体大小(默认16px), 文字颜色(默认白色)，背景颜色(默认黑色)tv端无控制台，所以需要此api显示打印信息
getDom1int根据传参索引返回元素
getFocus0无返回当前焦点索引
getParam3字段名:字符串 默认值 地址:默认当前地址解析url传参
gotoPage1url地址单纯的跳转url，可能会在需要跳转前发送请求而存在
getFocusDom0无返回当前焦点dom元素
stopFocus1数组：内容为一个或多个dom索引使数组内的焦点无法被获取焦点
openFocus1数组：内容为一个或多个dom索引使数组内的焦点从stopFocus内移除，能够获取焦点
refresh0无调用后库会丢弃原来的焦点集合，重新去抓取页面上的焦点
getDarkIndex1darkFocus索引调用后会返回对应darkFocus组中当前的暗焦点索引

V 版本日志

版本号更新内容日期
1.0.9添加异步使用详细说明2023-10-31
1.0.8异步添加提供简便函数调用方法appendActionEvent2023-10-4
1.0.7修复下移时有时会出现的意外焦点bug，md文档添加getDarkIndex2023-3-1
1.0.6提供一个初始化的生命周期，为了适配页面初始化时要添加dom的需求2022-5-19
1.0.5添加焦点切换前后事件，动态修改焦点获取与否，增加框架的灵活性2022-3-8
1.0.4添加暗焦点相关事件，以及暗焦点防抖等处理2022-3-7
1.0.3添加methods传参，用来优化代码规范，添加getparam方法，获取url参数2022-3-3
1.0.2添加打印调试api，以及readme.md排版更新，版本日志2021-12-27
1.0.1添加二级以上页面，失焦获焦事件2021-12-21
1.0.0具备tv端焦点框架基本需求2021-12-20

其他

如果这个框架能够被很多使用到，我想我会非常的开心，如果你有什么觉得框架需要增加的好的建议，我很荣幸能够知道，这是我的联系方式，请表明来意,希望您能给我一个点赞，这是对我最大的鼓励

vx:DoubleU-_

QQ:1026990903

# javascript # 前端 # 开发语言
Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。快速开始高性能Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。跨平台你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...

avatar 智屏生态联盟

Taro写小程序总结

1.首先需要在『微信公众平台』注册帐号，我一直很困惑为啥，微信公众平台不能和微信开放平台整合，而且账号不能通用~https://mp.weixin.qq.com2.在微信公从平台里的->开发->服务器域名,可以配置小程序中可以访问的接口的域名3.在『成员管理』中可以添加开发者、体验者等成员。方便协作办工Taro的一些例子：1.转发在render中写&...

avatar 智屏生态联盟