ソースを参照

🎨 优化TV导航问题

快乐的梦鱼 4 週間 前
コミット
a013fb5fd8
共有4 個のファイルを変更した16 個の追加0 個の削除を含む
  1. 5 0
      src/composeable/TvFocusImprovement.ts
  2. 5 0
      src/views/Content/TabCommonList.vue
  3. 3 0
      src/views/Content/TabCustomList.vue
  4. 3 0
      src/views/Content/TabVillageList.vue

+ 5 - 0
src/composeable/TvFocusImprovement.ts

@@ -18,6 +18,7 @@ export function useTvFocusImprovement(fromApp = false) {
   }
 
   function initSpatialNavigation() {
+    SpatialNavigation.clear();
     SpatialNavigation.add({
       selector: '.focusable, a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
     });
@@ -65,4 +66,8 @@ export function useTvFocusImprovement(fromApp = false) {
       window.removeEventListener('keyup', handleKeyUp);
     });
   }
+
+  return {
+    initSpatialNavigation
+  }
 }

+ 5 - 0
src/views/Content/TabCommonList.vue

@@ -16,6 +16,7 @@
 import { useSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
 import { useRouter } from 'vue-router';
 import { computed, ref, watch, type PropType } from 'vue';
+import { useTvFocusImprovement } from '@/composeable/TvFocusImprovement';
 import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
 import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
 import SimplePageListContentPager from '@/components/SimplePageListContentPager.vue';
@@ -53,6 +54,7 @@ const props = defineProps({
   }
 })
 
+const { initSpatialNavigation } = useTvFocusImprovement();
 const emit = defineEmits(['itemClick']);
 const activeSubTab = ref(0);
 const router = useRouter();
@@ -73,6 +75,9 @@ const loader = useSimplePagerDataLoader(16, async (page, size) => {
     } else
       mainBodyColumnId = item as number
   }
+
+  setTimeout(initSpatialNavigation, 200);
+
   return CommonContent.getContentList(new GetContentListParams()
     .setModelId(modelId)
     .setMainBodyColumnId(mainBodyColumnId as number)

+ 3 - 0
src/views/Content/TabCustomList.vue

@@ -20,10 +20,13 @@ import CommonContent, { GetColumListParams } from '@/api/CommonContent';
 import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
 import GridList from '@/components/small/GridList.vue';
 import { ScrollRect } from '@imengyu/vue-scroll-rect';
+import { useTvFocusImprovement } from '@/composeable/TvFocusImprovement';
 
+const { initSpatialNavigation } = useTvFocusImprovement();
 const emit = defineEmits(['itemClick']);
 const router = useRouter();
 const loader = useSimpleDataLoader(async () => {
+  setTimeout(initSpatialNavigation, 200);
   return CommonContent.getColumList(new GetColumListParams()
     .setModelId(4)
     .setMainBodyColumnId([ 8,9,246,248 ])

+ 3 - 0
src/views/Content/TabVillageList.vue

@@ -15,6 +15,7 @@ import { ScrollRect } from '@imengyu/vue-scroll-rect';
 import VillageApi from '@/api/village/VillageApi';
 import CommonContent from '@/api/CommonContent';
 import Tab from '@/components/small/Tab.vue';
+import { useTvFocusImprovement } from '@/composeable/TvFocusImprovement';
 
 const emit = defineEmits(['itemClick']);
 const router = useRouter();
@@ -22,8 +23,10 @@ const tab = ref(0);
 const tabId = computed(() => {
   return tagsData.value[tab.value]?.id || 0;
 })
+const { initSpatialNavigation } = useTvFocusImprovement();
 const loader = useSimpleDataLoader(async () => {
   const res = await VillageApi.getVillageList(tabId.value);
+  setTimeout(initSpatialNavigation, 200);
   return { 
     page: 1,
     total: res.length,