@shijiu/jsview-vue 0.9.684 → 0.9.783

package/samples/FocusBlockDemos/ProgressiveFocusControl/BaseBlock.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { shallowRef } from "vue";
+import { DefaultKeyCodeMap } from "jsview"
+
+const props = defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default: {},
+  },
+  onLeftRight: Function,
+});
+
+const hasFocused = shallowRef(false);
+
+const onFocusFunc = () => {
+  console.log(`子节点 ${props.name} 获得焦点`);
+  hasFocused.value = true;
+};
+
+const onBlurFunc = () => {
+  console.log(`子节点 ${props.name} 失去焦点`);
+  hasFocused.value = false;
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`子节点 ${props.name} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`子节点 ${props.name} 收到回流按键 code=${ev.keyCode}`);
+  
+  // 将按键转化为left/right指令
+  let keyConsumed = true;
+  switch(ev.keyCode) {
+    case DefaultKeyCodeMap.Left:
+      props.onLeftRight?.("left");
+      break;
+    case DefaultKeyCodeMap.Right:
+      props.onLeftRight?.("right");
+      break;
+    default:
+      keyConsumed = false;
+  }
+
+  if (keyConsumed) {
+    console.log(`子节点 ${props.name} 截断按键回流处理`)
+  }
+  return keyConsumed;
+}
+
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+  >
+    <div
+      :style="{
+        ...props.style,
+        width: 100,
+        height: 100,
+        fontSize: 35,
+        backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
+      }"
+    >
+      {{ props.name }}
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/FocusBlockDemos/ProgressiveFocusControl/DownPlaneBlock.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { inject } from "vue" 
+import { useFocusHub } from "jsview"
+import BaseBlock from "./BaseBlock.vue";
+import FocusNames from "./FocusNamesDefine"
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.Box1, FocusNames.Box2, FocusNames.Box3];
+let globalColumn = inject("globalColumn"); // 从App获取的全局coloumn信息
+let lastIndex = 0;
+let planeName = FocusNames.DownPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 让子焦点获焦
+  lastIndex = globalColumn.index; // 同步全局节点信息
+  focusHub.setFocus(ChildBlockNames[lastIndex]);
+};
+
+const onBlurFunc = () => {
+  console.log(`父节点 ${planeName} 失去焦点`);
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到回流按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const leftRightFunc = (action)=>{
+  let indexChanged = false;
+
+  if (action == "left") {
+    if (lastIndex >= 0) {
+      lastIndex--;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+
+  if (indexChanged) {
+    // 回传lastIndex columen, 以方便Plane切换后保持column
+    globalColumn.index = lastIndex;
+  }
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="planeName"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+    :style="props.style"
+  >
+    <base-block :name="ChildBlockNames[0]" :style="{left:150 * 1}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[1]" :style="{left:150 * 2}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[2]" :style="{left:150 * 3}" :onLeftRight="leftRightFunc" />
+  </jsv-focus-block>
+</template>

package/samples/FocusBlockDemos/ProgressiveFocusControl/FocusNamesDefine.js

@@ -0,0 +1,12 @@
+const FocusNames = {
+    UpPlane: "UpPlane",
+    DownPlane: "DownPlane",
+    BoxA: "A",
+    BoxB: "B",
+    BoxC: "C",
+    Box1: "1",
+    Box2: "2",
+    Box3: "3",
+}
+
+export default FocusNames;

package/samples/FocusBlockDemos/ProgressiveFocusControl/UpPlaneBlock.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { inject } from "vue" 
+import { useFocusHub } from "jsview"
+import BaseBlock from "./BaseBlock.vue";
+import FocusNames from "./FocusNamesDefine"
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.BoxA, FocusNames.BoxB, FocusNames.BoxC];
+let globalColumn = inject("globalColumn"); // 从App获取的全局coloumn信息
+let lastIndex = 0;
+let planeName = FocusNames.UpPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 让子焦点获焦
+  lastIndex = globalColumn.index; // 同步全局节点信息
+  focusHub.setFocus(ChildBlockNames[lastIndex]);
+};
+
+const onBlurFunc = () => {
+  console.log(`父节点 ${planeName} 失去焦点`);
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到回流按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const leftRightFunc = (action)=>{
+  let indexChanged = false;
+
+  if (action == "left") {
+    if (lastIndex >= 0) {
+      lastIndex--;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+
+  if (indexChanged) {
+    // 回传lastIndex columen, 以方便Plane切换后保持column
+    globalColumn.index = lastIndex;
+  }
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="planeName"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+    :style="props.style"
+  >
+    <base-block :name="ChildBlockNames[0]" :style="{left:150 * 1}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[1]" :style="{left:150 * 2}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[2]" :style="{left:150 * 3}" :onLeftRight="leftRightFunc" />
+  </jsv-focus-block>
+</template>

package/samples/GridDemo/App.vue

@@ -7,15 +7,15 @@
 -->
 <script setup>
 import { jJsvRuntimeBridge, JsvGrid, LineType, EdgeDirection } from "jsview";
-import { reactive, ref, onMounted } from "vue";
+import { reactive, ref, shallowRef, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import ItemVue from "./Item.vue";
 import FocusItem from "./FocusItem.vue";
 const lineType = new LineType(1, 3);
 const name1 = "updatePage1";
 const name2 = "updatePage2";
-const widget1 = ref(null);
-const widget2 = ref(null);
+const widget1 = shallowRef(null);
+const widget2 = shallowRef(null);
 const router = useRouter();
 const _provideData1 = () => {
   let data = [];

package/samples/GridDemo/ButtonBlock.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   userData: Object,
   name: String,
@@ -15,7 +15,7 @@ const props = defineProps({
 let focusIndex = ref(0);
 let focused = ref(false);
 let divNumber = new Array(25);
-let focusBlock = ref(null);
+let focusBlock = shallowRef(null);
 
 const _onFocus = () => {
   console.log("button onfocus", props.userData);

package/samples/GridDemo/FocusItem.vue

@@ -7,7 +7,7 @@
 -->
 <script setup>
 import ButtonBlock from "./ButtonBlock.vue";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   userData: Object,
@@ -16,7 +16,7 @@ const props = defineProps({
 });
 const focused = ref(false);
 const divNumber = new Array(50);
-const button = ref(null);
+const button = shallowRef(null);
 const onFocus = () => {
   button.value
     .getFocusBlock()

package/samples/GridDemo/Item.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, onUpdated, onMounted } from "vue";
+import { ref, shallowRef, onUpdated, onMounted } from "vue";
 
 const props = defineProps({
   userData: Object,

package/samples/HashHistory/App.vue

@@ -1,16 +1,23 @@
+<script>
+import { router, routeList } from "./router.js";
+export default {
+  Router: router,
+};
+</script>
+
 <script setup>
 import { jJsvRuntimeBridge } from "jsview";
 import { router, routeList } from "./router.js";
 import { useRouter, useRoute } from "vue-router";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 
 const props = defineProps({
   routePath: String,
 });
 
 const displayUrl = ref("");
-let topRef = ref(null);
-let routePage = ref(null);
+let topRef = shallowRef(null);
+let routePage = shallowRef(null);
 let currentRouter;
 if (props.routePath) {
   const currentRoute = useRoute();

package/samples/HashHistory/components/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 const props = defineProps({
   style: Object,
   name: String,

package/samples/ImpactStop/App.vue

@@ -6,6 +6,7 @@
  * @Description: file content
 -->
 <script setup>
+import { jJsvRuntimeBridge } from "@shijiu/jsview-vue/utils/JsViewVueTools/JsvRuntimeBridge";
 import {
   JsvActorMoveControl,
   JsvActorMove,
@@ -13,7 +14,7 @@ import {
   createImpactCallback,
   createImpactAutoFroze,
 } from "jsview";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const CONST_BOARD_LEFT = 0;
@@ -25,12 +26,13 @@ const CONST_BOX_HEIGHT = 30;
 
 const horizontalControl = new JsvActorMoveControl();
 const verticalControl = new JsvActorMoveControl();
-const boxLeft = ref(null);
-const boxMid = ref(null);
-const boxRight = ref(null);
-const actorVertical = { current: null };
-const actorHorizontal = { current: null };
-const actor = ref(null);
+const boxLeft = shallowRef(null);
+const boxMid = shallowRef(null);
+const boxRight = shallowRef(null);
+const actor = shallowRef(null);
+
+let actorVertical = shallowRef(null);
+let actorHorizontal = shallowRef(null);
 
 let viewsAutoFroze = null;
 let sensorList = [];
@@ -195,7 +197,7 @@ onMounted(() => {
 
   /* 将碰撞发生后要停止动画的元素打包 */
   viewsAutoFroze = createImpactAutoFroze(
-    [actorVertical.current, actorHorizontal.current],
+    [actorVertical.value.mainDiv, actorHorizontal.value.mainDiv],
     null
   ); // 此句柄最好保留，未来可以通过此句柄统一进行views list更新
 
@@ -236,6 +238,8 @@ onMounted(() => {
   );
 
   reset();
+
+  jJsvRuntimeBridge.notifyPageLoaded();
 });
 
 onBeforeUnmount(() => {
@@ -379,12 +383,12 @@ onBeforeUnmount(() => {
     <div key="actor" :style="{ top: 520 - CONST_BOX_HEIGHT - 2, left: 40 }">
       <jsv-actor-move
         key="horizontal"
-        :refDefine="actorHorizontal"
+        ref="actorHorizontal"
         :control="horizontalControl"
       >
         <jsv-actor-move
           key="vertical"
-          :refDefine="actorVertical"
+          ref="actorVertical"
           :control="verticalControl"
         >
           <div
@@ -432,4 +436,4 @@ onBeforeUnmount(() => {
   text-overflow: ellipsis;
   text-align: center;
 }
-</style>
+</style>

package/samples/Input/InputPanel.vue

@@ -8,7 +8,7 @@
 <script>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";

package/samples/LongImage/Button.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/samples/LongImage/ButtonItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/LongImage/LongImageScroll.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Scroll from "./Scroll.vue";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 import { useFocusHub } from "jsview";
 
 const props = defineProps({
@@ -12,7 +12,7 @@ const props = defineProps({
 });
 
 const focusHub = useFocusHub();
-const element = ref(null);
+const element = shallowRef(null);
 const scrollY = ref(0);
 const textY = ref(0);
 const onAction = {

package/samples/LongText/App.vue

@@ -27,7 +27,7 @@
 import LongTextScroll from "./LongTextScroll.vue";
 import Button from "./Button.vue";
 import { jJsvRuntimeBridge } from "jsview";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();

package/samples/LongText/Button.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/samples/LongText/ButtonItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   data: Object,

package/samples/LongText/LongTextScroll.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Scroll from "./Scroll.vue";
-import { ref, onMounted } from "vue";
+import { ref, shallowRef, onMounted } from "vue";
 
 const props = defineProps({
   step: Number,
@@ -10,8 +10,8 @@ const props = defineProps({
   textStyle: Object,
 });
 
-const rootRef = ref(null);
-const element = ref(null);
+const rootRef = shallowRef(null);
+const element = shallowRef(null);
 const scrollY = ref(0);
 const textY = ref(0);
 

package/samples/Marquee/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-18 18:24:18
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-10 15:29:12
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 13:43:43
  * @Description: file content
 -->
 <script setup>
@@ -168,7 +168,6 @@ onMounted(() => {
           lineHeight: 70,
           fontSize: 50,
           color: '#000000',
-          direction: 'rtl',
         }"
         text="انجليزي"
         :slideSpeed="slideSpeed"
@@ -243,5 +242,37 @@ onMounted(() => {
         超长rtl文字
       </div>
     </div>
+    <div
+      :style="{
+        left: 50,
+        top: 610,
+        width: width,
+        height: height,
+        backgroundColor: '#FFFFFF',
+      }"
+    >
+      <jsv-marquee
+        :style="{
+          width,
+          height,
+          lineHeight: 70,
+          fontSize: 50,
+          color: '#000000',
+        }"
+        text="测试文字"
+        :forceSlide="true"
+        :slideSpeed="slideSpeed"
+        slideDirection="ets"
+      />
+      <div :style="{
+        left: width + 20,
+        height: height,
+        color: '#ffffff',
+        fontSize: 50,
+        lineHeight: 50,
+      }">
+        反向滚动示例
+      </div>
+    </div>
   </jsv-focus-block>
 </template>

package/samples/Marquee/longText.js

@@ -2,13 +2,13 @@
  * @Author: ChenChanghua
  * @Date: 2022-11-10 15:08:28
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-10 15:21:11
+ * @LastEditTime: 2022-11-21 17:47:57
  * @Description: file content
  */
 const longLongText =
   "艾因小萌班用户服务协议及隐私权保护政策特别提示：欢迎您使用“艾因小萌班”。本用户服务协议及隐私权保护政策（下称“本协议”）是您与运营方之间订立的具有法律效力的合同。请您仔细阅读并充分理解本协议各条款内容，特别是涉及免除或者限制责任的条款、权利许可和信息使用的条款、同意开通和使用特殊单项服务的条款、法律适用和争议解决条款等。其中，免除或者限制责任条款等重要内容可能以下划线/加粗进行提示您，您应重点阅读。未成年人用户请在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后使用“艾因小萌班”。除非您完全接受本协议的全部内容，否则您无权下载、注册、登录、使用（以下统称“使用”）“艾因小萌班”，或者通过任何方式使用“艾因小萌班”服务，或者获得“艾因小萌班”提供的任何服务（本协议中统称“使用”）。若您使用“艾因小萌班”及相关服务，则视为您已充分理解本协议并承诺作为本协议的一方当事人接受协议的约束，您不得以未仔细阅读、未充分理解等理由拒绝接受本协议的约束。本协议内容或不能保证完全符合未来业务发展需求。为此，您同意运营方保留随时修改本协议的权利。本协议条款修改后，运营方将及时公布，您同意予以密切关注。如果您继续使用艾因小萌班，即视为您完全接受修改后的协议。如果您不接受修改后的协议，请立即停止使用艾因小萌班。关于艾因小萌班的使用您使用“艾因小萌班”及相关服务，登录后，系统将为您自动匹配一个不可更改的用户ID,您应妥善保管该用户ID并对以您用户ID所进行的所有活动负法律责任。";
 
 const rtlLongLongText =
-  "مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم مرحبا بالعالم ";
+  "نحن لا نضع أي فرضيات مسبقة عن التكنولوجيا الأخرى التي تستخدمها، فلهذا يمكنك تطوير ميزات و إضافات باستخدام دون الحاجة الى إعادة كتابة أي شيفرة مكتوبة سابقاً الواجهات المُعرّفة (التصريحية)، تجعل الشيفرة الخاصة بالبرنامج سهلة التوقع عند تنفيذها و سهلة التصحيح في حالة وجود أخطاء للغاية، ﻻ يجب عليك سوى أن تصمم واجهة بسيطة لكل حالة من حالات التطبيق و بعدها React يتكفل وبفاعلية بتحديث و إعادة رسم المكّون المعني بالتحديث فقط عند تغيُّر البيانات تُدير حالتها الخاصّة، ومن ثمّ تُركِّب هذه المكوّنات مع بعضها لإنشاء واجهات مستخدم مُعقّدة نحن لا نضع أي فرضيات مسبقة عن التكنولوجيا الأخرى التي تستخدمها، فلهذا يمكنك تطوير ميزات و إضافات باستخدام";
 
 export { longLongText, rtlLongLongText };

package/samples/MetroWidgetDemos/PerformanceTest/App.vue

@@ -76,7 +76,7 @@ import { data1, data2, data3 } from "./data";
 import borderImgPath from "./border.png";
 import Item from "./components/ContentItem.vue";
 import MyTab from "./components/MyTab.vue";
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import {
   VERTICAL,
@@ -90,7 +90,7 @@ const router = useRouter();
 const focusHub = useFocusHub();
 let contentData = data1;
 let requestDataTime = 0;
-const mwRef = ref(null);
+const mwRef = shallowRef(null);
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -127,7 +127,7 @@ const onItemFocus = (id) => {
     clearTimeout(requestDataTime);
     requestDataTime = 0;
   }
-  requestDataTime = setTimeout(() => {
+  // requestDataTime = setTimeout(() => {
     switch (id) {
       case 0:
         contentData = data1;
@@ -140,7 +140,7 @@ const onItemFocus = (id) => {
         break;
     }
     mwRef.value?.refreshData(true);
-  }, 0);
+  // }, 0);
 };
 
 onBeforeUnmount(() => {

package/samples/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -13,7 +13,7 @@ import couponMid from "../assets/coupon_mid.png";
 import borderLeft from "../assets/line_left.png";
 import borderMid from "../assets/line_mid.png";
 import borderRight from "../assets/line_right.png";
-import { ref, computed } from "vue";
+import { ref, shallowRef, computed } from "vue";
 
 const props = defineProps({
   data: Object,