vue TV端焦点移动插件-画廊效果实现

vue TV端焦点移动插件

npm：https://www.npmjs.com/package/vue-tv-focusable
文档：https://blog.csdn.net/sllailcp/article/details/109044265

安装

npm i -S vue-tv-focusable

main.js中

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

tv.component.vue组件中的html(css有点多，此处就不写了)：

<div class="tv-box">
    <div class="item-box">
      <div class="perspective">
        <div class="item" v-focusable v-for="(item,index) of list" :key="index"
        @left="left(index,$event)" @right="right(index,$event)" @down="nofocus" @up="nofocus"  @click="skip(index)"
        :style="{
          left: -100 * index - index * 20 +'px',
          zIndex: activeIndex === index ? 1100 :1000-Math.abs(activeIndex - index) * 5,
          transform: `rotateY(${activeIndex < index ? '-30deg':activeIndex === index?'0deg':'30deg'}) scale(${1-Math.abs(activeIndex - index)*0.05})`,
        }">
          <img :src="item.url"/>
        </div>
      </div>
    </div>
  </div>

tv.component.vue组件中的js

  created() {
     this.$nextTick(() => {
      this.$tv.init({ distanceToCenter:true }); // 焦点居中
      this.$tv.setScrollEl(document.querySelector('.item-box')); // 设置滚动的div
      this.$tv.requestFocus(this.$tv.getElementByPath("//div[@class='perspective']/div[3]"));// 初始化第3个div聚焦
    })
  },
  destroyed() {
  // 组件销毁，重置distanceToCenter的默认值，默认：false
    this.$tv.init({ distanceToCenter:false });
  },
  methods:{
    skip(id){ // 按ok键跳转到详情页面
      this.loadingShow = true;
      this.$router.push({"path":"/detail",query:{id}})
    },
    nofocus(event){ this.$tv.requestFocus(event.target); },
    right(index, event){
      if(index === this.list.length - 1 ){return;}
      this.activeIndex = index + 1;
    },
    left(index,event){
      if(index === 0 ){return;}
      this.activeIndex = index - 1;
    }
 }

解释：
1.指令v-focusable设置可获取焦点的div
2.添加自定义事件@left,@right，按左右按键来计算当前层级以及缩放比例
3.添加自定义事件@up,@down，按上下按键的时候阻止焦点跳动
4.添加click事件，按ok键盘的时候跳转详情页

demo地址:https://github.com/slailcp/tv-focusable-example/blob/master/vue-tv-focusable-example/src/views/example8.vue

最终界面：

86.gif