进入频道详情页面时,让全屏按钮处于聚集状态

使用vue-tv-focusable插件来实现焦点移动

注意: 进入页面时想让某个元素聚焦,要在 nextTick 回调中进行,否则会因页面未加载完全而导致焦点移动并不如你所愿。

s
export default class Example1 extends Vue { created() { this.$nextTick(() => { this.$tv.requestFocus(this.$refs.myDiv) }) } }

知识点:如何获取通过v-for遍历出来的组件或元素的dom

在vue3中不能直接用ref来获取全部节点的数组,需要通过ref函数
1、声明一个空数组用来存放遍历出来的所有dom
let channelBtnRef: any[] = [] }

2、为遍历组件绑定ref函数

3、把获取到的dom放到channelBtnRef数组中
channelBtnRef.push(el)

4、为channelBtnRef数组下标为0的元素(全屏按钮),添加焦点
proxy.$tv.requestFocus(channelBtnRef[0])

完整代码

import { getCurrentInstance } from 'vue'

setup() {
    const { proxy } = getCurrentInstance() as any
    let channelBtnRef: any[] = []
    const setChannelBtnRef = (el: any) => {
      if (el) {
        channelBtnRef.push(el)
      }
    }
    onMounted(() => {
      nextTick(() => {
        proxy.$tv.requestFocus(channelBtnRef[0])
      })
    })
    return { channelBtnData, setChannelBtnRef }
}

你可能感兴趣的:(进入频道详情页面时,让全屏按钮处于聚集状态)