第一次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(); },
看檔案功能挺豐富的，不過我能用上的不多，后面有機會可以在看下，
總之我的踩坑之路到這就算結束了！
下面是我套用的頁面，總體感覺和安卓原生的還是挺相似的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237029.html
標籤：JavaScript