vue-epg解决iptv项目中的焦点获取和移动

从人到猿

已于 2023-01-30 16:04:57 修改

阅读量4.7k

点赞数 6

分类专栏： IPTV 文章标签： vue-epg解决iptv项目中的焦点获取和移动

于 2019-12-11 17:49:34 首次发布

本文链接：https://blog.csdn.net/qq_39200185/article/details/103495265

版权

IPTV 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

最近在做iptv方面的前端工作，遇到一些比较棘手的问题，网上搜也没有搜到多少有用的的知识，在csdn 看到有vue-epg的博文，进去看了一下，讲的很简陋，但是用到的vue-epg的框架让我的工作轻松了很多，项目现在已经上线，对vue-epg框架有了一些浅显的认识，分享出来，希望对大家有点帮助。

vue-epg框架

1. 文档地址

vue-epg文档地址,点击浏览

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
点赞
踩
10

收藏

觉得还不错? 一键收藏
34
评论
vue-epg解决iptv项目中的焦点获取和移动

最近在做iptv方面的前端工作，遇到一些比较棘手的问题，网上搜也没有搜到多少有用的的知识，在csdn 看到有vue-epg的博文，进去看了一下，讲的很简陋，但是用到的vue-epg的框架让我的工作轻松了很多，项目现在已经上线，对vue-epg框架有了一些浅显的认识，分享出来，希望对大家有点帮助。vue-epg框架1. 文档地址vue-epg文档地址,点击浏览2. 使用方法文档中有两...
复制链接

扫一扫

专栏目录