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 v-focusable></div>

 

我們的項目中是需要用到div滾動的，所有在組件中setScrollEl()方法，不過跳到下一個頁面的時候會影響下一個界面的交互，要在銷毀組件的時候調用resetScrollEl()才行。

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

 destroyed() {

    this.$tv.resetScrollEl();

 },

文檔功能挺豐富的，不過我能用上的不多

總之我的踩坑之路到這就算結束了！

　　

下面是我套用的頁面，總體感覺和安卓原生的還是挺相似的。