vue TV端焦点移动插件 vue-tv-focusable

第一次tv端开发，记录下来个人坎坷路程

最近作TV端的项目，须要用到焦点移动。网上各类各样的插件层出不穷，用用就发现不是这有问题就是那有bug，要一直填坑，搞得头都大了。

搞了很久，最后使用了vue-tv-focusable

下面是安装以及我项目中能用到的。

安装 npm i -S vue-tv-focusable

npm地址：https://www.npmjs.com/package/vue-tv-focusable

main.js中使用：

import Vue from "vue";
import focusable from 'vue-tv-focusable';
Vue.use(focusable);

const vm = new Vue();

vm.$tv.init({
    initDis: 30,
    KEYS: {
      KEY_LEFT: [37], 
      KEY_UP: [38], 
      KEY_DOWN: [40],
      KEY_ENTER: [83, 13] // ok键， 长按
    }
});

vm.$tv.init中全局配置key的键，（不配置也是能够使用的。只要div上有v-focusable指令就行）

 

在组件中经过指令v-focusable使用

 

咱们的项目中是须要用到div滚动的，全部在组件中setScrollEl()方法，不过跳到下一个页面的时候会影响下一个界面的交互，要在销毁组件的时候调用resetScrollEl()才行。

created() {   this.$nextTick(() => {     this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='item-box']"))
   })
},

 destroyed() {

    this.$tv.resetScrollEl();

 },

文档功能挺丰富的，不过我能用上的很少

总之个人踩坑之路到这就算结束了！

　　

下面是我套用的页面，整体感受和安卓原生的仍是挺类似的。