最近在做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)有对适配技巧给出方案。

Logo

前往低代码交流专区

更多推荐