vue-epg解决iptv项目中的焦点获取和移动
最近在做iptv方面的前端工作，遇到一些比较棘手的问题，网上搜也没有搜到多少有用的的知识，在csdn看到有vue-epg的博文，进去看了一下，讲的很简陋，但是用到的vue-epg的框架让我的工作轻松了很多，项目现在已经上线，对vue-epg框架有了一些浅显的认识，分享出来，希望对大家有点帮助。vue-epg框架1. 文档地址vue-epg文档地址,点击浏览2. 使用方法文档中有两...
·
最近在做iptv方面的前端工作，遇到一些比较棘手的问题，网上搜也没有搜到多少有用的的知识，在csdn 看到有vue-epg的博文，进去看了一下，讲的很简陋，但是用到的vue-epg的框架让我的工作轻松了很多，项目现在已经上线，对vue-epg框架有了一些浅显的认识，分享出来，希望对大家有点帮助。
vue-epg框架
1. 文档地址
2. 使用方法
文档中有两处有错误的地方，第一处在vue项目中初始化，第二处是括号没有闭合
//下面的这句话会报错
import {VueEpg} from 'vue-epg' //引入组件
//改成这样
import VueEpg from 'vue-epg' //引入组件
附上我修改后main的代码
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueEpg from 'vue-epg' //引入组件
Vue.config.productionTip = false
//定义并实例化 VueEpg
const epg = new VueEpg({
focus_class:'focus',
group_name:'.group',
actions:['number'], //自定义的方法，在 组件中需指定，名称对应大写的 KeyActions 的Key 如 number 对应 NUMBER
setKeyBoardEventListener: service=> {
//这里设置各事件监听
//方向 上下左右必须监听 可绑定多个值
document.addEventListener("keydown", event => {
const keyCode = event.keyCode ? event.keyCode : event.charCode ? event.charCode : event.which;
service.keyActions.UP.push(...[19,38]) //数组中的值响应 按下上键的事件
service.keyActions.DOWN.push(...[20,47,40])
service.keyActions.LEFT.push(...[29,21,37])
service.keyActions.RIGHT.push(...[22,32,39])
service.keyActions.ENTER.push(...[73,66,23]) //类似Click 点击
service.keyActions.BACK.push(...[4,27])
service.keyActions.NUMBER=[49,50,51,52,53,54,55,56,57,48,96,97,98,99,100,101,102,103,104,105] //绑定为数字键
service.eventHandler(keyCode) //注册响应
})
}
})
//vue 绑定 epg 实例
Vue.use(epg)
//配置结束
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这样就将vue-epg的包引进来了，接下来就是组主要的如何通过遥控器控制焦点的移动了
页面怎么搭建路由，怎么封装组件我在这里就不啰嗦了，主要说说焦点的问题。
vue-epg里面有个v-items，你想让哪个获取到焦点就给那个元素加一个v-items，跟vue的操作指令有点相似，看一下代码就可以理解。焦点的移动才是关键，vue-epg给出里四个函数up、down、left、right，通过绑定这四个函数就可以控制焦点的移动，在语法上有点像是绑定事件，这个也不是很难理解。但是，如果说获取到的数据很多，渲染完成后页面超过一屏（浏览器可视窗口），当你点击下键焦点移动到一屏之外的元素上时，你会发现页面没有跟着滚动，焦点可以继续向下移动，而页面的滚动距离跟不上焦点移动的距离，就会出现看不到焦点的问题。
如何让焦点移动的时候让页面也跟着滚动就是比较重要的问题了，如果你也碰到这个问题，不要慌，看下面：
Element.scrollIntoView()
这个方法可以解决页面不滚动的方法，想看的自己点链接看，我在这里就不多扯，不水字数，要讲就讲干货
scrollIntoView(true)，元素上边框和浏览器可视窗口上边框对齐，
scrollIntoView(false)，元素下边框和浏览器可视窗口下边框对齐，
用vue-epg框架里面的一个方法拿到当前焦点元素，然后给这个元素加上scrollIntoView方法，看代码：
this.$service.pointer.$el.scrollIntoView(true);//当前焦点元素上边框和浏览器可视窗口上边框对齐
大概就这么多吧， 干货也讲完了，不想再写了，但是vue-epg的框架文档很简陋，所以下面铺点我写的小demo，看一下文档再看看这个，效果会好点。
Home.vue
<template>
<div class="home">
<List :data="list"></List>
</div>
</template>
<script>
import List from '../components/List'
export default {
data(){
return {
list:[
{imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"},
{imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4055341298,4125206667&fm=26&gp=0.jpg'},
{imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=333133706,3799233384&fm=26&gp=0.jpg'},
{imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3644647429,363760669&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=187205501,62508223&fm=26&gp=0.jpg'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627176609,411971384&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=24210266,675748562&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
{imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"},
{imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4055341298,4125206667&fm=26&gp=0.jpg'},
{imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=333133706,3799233384&fm=26&gp=0.jpg'},
{imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3644647429,363760669&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=187205501,62508223&fm=26&gp=0.jpg'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627176609,411971384&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=24210266,675748562&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
{imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232013248,1467217970&fm=26&gp=0.jpg"},
{imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2354576728,3039826807&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4055341298,4125206667&fm=26&gp=0.jpg'},
{imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=333133706,3799233384&fm=26&gp=0.jpg'},
{imgsrc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3644647429,363760669&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=187205501,62508223&fm=26&gp=0.jpg'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627176609,411971384&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=24210266,675748562&fm=26&gp=0.jpg'},
{imgsrc:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3353196162,3490574505&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4040151157,1106752969&fm=26&gp=0.jpg'},
{imgsrc:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026123974,515270420&fm=26&gp=0.jpg'},
]
}
},
components:{
List
}
}
</script>
<style scoped>
</style>
List.vue
<template>
<div class="list">
<ul>
<li
class="list_box"
v-items
@left="left()"
@right="right()"
@up="up()"
@down="down()"
v-for="(v,i) in data"
:key="i"
@click="list(i)"
>
<img :src="v.imgsrc">
</li>
</ul>
</div>
</template>
<script>
export default {
props:{
data:{
type:Array,
required:true
}
},
mounted(){
let el = document.getElementsByClassName("list_box")[0];
this.$service.move(el); //vue-epg封装的移动焦点的方法
},
methods:{
left(){
this.$service.move("left");
},
right(){
this.$service.move("right");
},
up(){
this.$service.move("up");
this.$service.pointer.$el.scrollIntoView(true);
},
down(){
this.$service.move("down");
this.$service.pointer.$el.scrollIntoView(true);
},
list(i){
console.log(i);
}
}
}
</script>
<style scoped>
.focus{
border: 5px solid yellow;
transform: scale(1.1);
border-radius: 10px;
box-shadow: 0px 0px 6px 2px #ffff00;
box-sizing: border-box;
}
.list li{
list-style: none;
float: left;
}
.list_box{
width:200px;
height:300px;
background-color: tomato;
margin :30px;
}
.list_box img{
width:100%;
height: 100%;
}
</style>
main.js在上面刚开始就发了
在想要不要放截图了，又一想不是动图也看不出来效果，干脆给个压缩包，自己看吧，地址留在评论区喔，刚发上去，审核还没过呢
下载地址
https://download.csdn.net/download/qq_39200185/12026863
新的推荐
评论区好大哥kan尘埃推荐的
View（view-app）框架（地址：http://t.csdn.cn/z2zvc），该框架包含机顶盒的焦点移动、相应的滚动、播放，页面跳转有比较好的封装，并且作者也对该框架开放源码，方便开发者在适配过程中遇到的问题，可以对框架做出相应调整。以及在另外一篇文章中（地址：http://t.csdn.cn/Yz13j）有对适配技巧给出方案。
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)