@shijiu/jsview-vue-samples 2.2.35 → 2.2.201

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -6,7 +6,12 @@
  * @Description: file content
 -->
 <script setup>
-import { VERTICAL, MetroWidget, METRO_WIDGET_CONST, SeamlessSlide } from "jsview";
+import {
+  VERTICAL,
+  MetroWidget,
+  METRO_WIDGET_CONST,
+  SeamlessSlide,
+} from "jsview";
 import WidgetItem from "./WidgetItem.vue";
 import { shallowRef, watch, onBeforeUnmount } from "vue";
 
@@ -26,11 +31,17 @@ const props = defineProps({
 
 const widgetRef = shallowRef(null);
 
-const slideSetting = props.data.tabIndex == 0 ? new SeamlessSlide({
-  startPercent: 0.5,
-  endPercent: 0.5,
-  fixFirstPage: true,
-}) : new SeamlessSlide();
+const slideSetting =
+  props.data.tabIndex == 0
+    ? new SeamlessSlide({
+        startPercent: 0.5,
+        endPercent: 0.5,
+        fixFirstPage: true,
+      })
+    : new SeamlessSlide({
+        startPercent: 0.5,
+        endPercent: 0.5,
+      });
 
 const provideData = () => {
   return props.data.data;
@@ -52,8 +63,7 @@ const watcher = watch(
 
 onBeforeUnmount(() => {
   watcher();
-})
-
+});
 </script>
 
 <template>
@@ -77,4 +87,4 @@ onBeforeUnmount(() => {
       ></widget-item>
     </template>
   </metro-widget>
-</template>
+</template>

package/MetroWidgetDemos/RefreshDemo/App.vue

@@ -1,13 +1,36 @@
 <script setup>
-import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import {
+  MetroWidget,
+  VERTICAL,
+  HORIZONTAL,
+  useFocusHub,
+  EdgeDirection,
+} from "jsview";
 import Item from "./Item.vue";
+import ControlItem from "./ControlItem.vue";
 import { onMounted, shallowRef } from "vue";
 import { useRouter } from "vue-router";
-import data from "./data.js";
+import imageUrl from "./assets/imageList.json";
 
-const data1 = data.slice(0, 20);
-const data2 = data.slice(0, 40);
-const data3 = data.slice(0, 60);
+let freshToken = 0;
+const prepareData = (data, w, h, start, end, contentPrefix = "test") => {
+  for (let i = start; i < end; ++i) {
+    data.push({
+      jsvKey: i + "_" + freshToken,
+      width: w,
+      height: h,
+      url: imageUrl[i],
+      index: i,
+      content: contentPrefix + "_" + i,
+    });
+  }
+};
+
+const data1 = [];
+const data2 = [];
+prepareData(data2, 200, 200, 0, 40);
+const data3 = [];
+prepareData(data3, 200, 200, 0, 60);
 
 const router = useRouter();
 const focusHub = useFocusHub();
@@ -21,13 +44,6 @@ const measures = (item) => {
   };
 };
 
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1);
-  }
-  return true;
-};
-
 let curData = data1;
 const provideData = () => {
   return curData;
@@ -38,64 +54,164 @@ onMounted(() => {
   setTimeout(() => {
     curData = data2;
     widgetRef.value.refreshData();
-
     setTimeout(() => {
       curData = data3;
       widgetRef.value.refreshData();
-    }, 100);
-  }, 100);
+    }, 1000);
+  }, 1000);
 });
 
 const widgetRef = shallowRef();
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus("control");
+  }
+};
+
+//controller
+const controlList = [
+  {
+    name: "追加",
+    callback: () => {
+      if (curData.length + 20 < imageUrl.length) {
+        prepareData(curData, 200, 200, curData.length, curData.length + 20);
+        widgetRef.value.refreshData();
+      }
+    },
+  },
+  {
+    name: "全部替换",
+    callback: () => {
+      freshToken++;
+      const data = [];
+      prepareData(data, 200, 100, 0, 60);
+      curData = data;
+      widgetRef.value.refreshData();
+    },
+  },
+  {
+    name: "刷新第5个item",
+    callback: () => {
+      if (curData.length > 5) {
+        freshToken++;
+        let oldItem = curData[5];
+        curData[5] = {
+          ...oldItem,
+          jsvKey: 5 + "_" + freshToken,
+          content: Math.round(Math.random() * 100) + "",
+        };
+        widgetRef.value.refreshData();
+      }
+    },
+  },
+  // {
+  //   name: "新数据旧id:不刷新",
+  //   callback: () => {
+  //     const data = [];
+  //     prepareData(data, 200, 200, 0, curData.length);
+  //     data.forEach((i, index) => {
+  //       i.jsvKey = curData[index].jsvKey;
+  //     });
+  //     curData = data;
+  //     widgetRef.value.refreshData();
+  //   },
+  // },
+  {
+    name: "同尺寸新数据:刷新",
+    callback: () => {
+      freshToken++;
+      const data = [];
+      prepareData(data, 200, 200, 0, curData.length > 0 ? curData.length : 40);
+      curData = data;
+      widgetRef.value.refreshData();
+    },
+  },
+  {
+    name: "刷新为空数据",
+    callback: () => {
+      freshToken++;
+      const data = [];
+      curData = data;
+      widgetRef.value.refreshData();
+    },
+  },
+];
+const controlWidgetMeasure = (data) => {
+  return {
+    width: 300,
+    height: 50,
+    marginBottom: 10,
+  };
+};
+const controlWidgetProvideData = () => {
+  return controlList;
+};
+const controlOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus("myFocusWidget");
+  }
+};
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
+  <div
     :style="{
       width: 1920,
       height: 1080,
       backgroundColor: '#007788',
     }"
-    :onKeyDown="onKeyDown"
+  ></div>
+  <metro-widget
+    ref="widgetRef"
+    name="myFocusWidget"
+    :top="100"
+    :left="50"
+    :width="1000"
+    :height="550"
+    :direction="VERTICAL"
+    :provideData="provideData"
+    :measures="measures"
+    :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
+    :enableItemRenderBreak="true"
+    :onEdge="onEdge"
+    :placeHolderSetting="{
+      backgroundColor: 'rgba(78,105,127, 0.8)',
+      focusBackgroundColor: '#770088aa',
+      borderRadius: 10,
+      gap: 10,
+    }"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <item :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <metro-widget
+    name="control"
+    :left="1100"
+    :top="50"
+    :width="300"
+    :height="500"
+    :direction="HORIZONTAL"
+    :provideData="controlWidgetProvideData"
+    :measures="controlWidgetMeasure"
+    :onEdge="controlOnEdge"
+  >
+    <template #renderItem="{ data, onAction }">
+      <control-item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: 50,
+      top: 50,
+      width: 800,
+      height: 200,
+      color: '#FFFFFF',
+      fontSize: 30,
+    }"
   >
-    <metro-widget
-      ref="widgetRef"
-      name="myFocusWidget"
-      :top="100"
-      :left="50"
-      :width="1000"
-      :height="550"
-      :direction="VERTICAL"
-      :provideData="provideData"
-      :measures="measures"
-      :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
-      :enableItemRenderBreak="true"
-      :placeHolderSetting="{
-        backgroundColor: 'rgba(78,105,127, 0.8)',
-        focusBackgroundColor: '#770088aa',
-        borderRadius: 10,
-        gap: 10,
-      }"
-    >
-      <template #renderItem="{ data, query, onEdge, onAction }">
-        <item
-          :data="data"
-          :query="query"
-          :onEdge="onEdge"
-          :onAction="onAction"
-        />
-      </template>
-    </metro-widget>
-  </jsv-focus-block>
-  <div :style="{
-    left: 50,
-    top: 50,
-    width: 800,
-    height: 200,
-    color: '#FFFFFF',
-    fontSize: 30
-  }">
-    起来时会刷新两次数据, 看起来无闪烁即可
+    起来时先是无数据, 1s后有数据, 再1s后刷新, 无报错, 无闪烁即可
   </div>
 </template>

package/MetroWidgetDemos/RefreshDemo/ControlItem.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+let focused = ref(false);
+
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  props.data.callback();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 300,
+      height: 50,
+      backgroundColor: focused ? '#444444' : '#778800',
+      fontSize: 30,
+      color: '#ffffff',
+    }"
+  >
+    {{ data.name }}
+  </div>
+</template>

package/MetroWidgetDemos/RefreshDemo/Item.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { JsvPosterImage, JsvPosterDiv } from "jsview";
 
 const props = defineProps({
@@ -31,6 +31,10 @@ const onClicked = () => {
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClicked);
+
+onMounted(() => {
+  console.log("item mounted", props.data.index);
+});
 </script>
 
 <template>
@@ -52,8 +56,7 @@ props.onAction.register("onClick", onClicked);
         backgroundColor: '#770088',
         borderRadius: 10,
       }"
-    >
-    </div>
+    ></div>
     <div v-if="query.index % 2 == 0">
       <jsv-poster-image
         :style="{
@@ -112,5 +115,18 @@ props.onAction.register("onClick", onClicked);
         {{ "div" }}
       </div>
     </div>
+
+    <div
+      :style="{
+        top: 50,
+        width: data.width,
+        height: 40,
+        backgroundColor: '#444444aa',
+        fontSize: 30,
+        color: '#ffffff',
+      }"
+    >
+      {{ data.content }}
+    </div>
   </div>
-</template>
+</template>

package/MetroWidgetDemos/routeList.js

@@ -92,4 +92,10 @@ export default [
     component: () =>
       import("jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
   },
+  {
+    name: "多item分段显示",
+    path: "/metroWidget/MassiveItems",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
+  },
 ]

package/SceneTransition/JsvSceneTransition.vue

@@ -98,61 +98,49 @@ const randomSelect = () => {
 const sag = () => {
   centerItemArray.forEach((item, index) => {
     if (center.x - item.x <= Math.abs(60)) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(16, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(16, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x <= 200) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(8, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(8, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x <= 500) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(-8, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(-8, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x > 500) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(-16, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(-16, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([controlArray[index].action().stopMoving()]),
+          .then([cmds.action().stopMoving()]),
       ]);
     } else if (center.x - item.x < -60) {
-      controlArray[index].run([
-        controlArray[index]
-          .action()
-          .setSpdAndAccel(20, randomSelect(), 0, 15, null, null),
-        controlArray[index]
+      controlArray[index].run((cmds) => [
+        cmds.action().setSpdAndAccel(20, randomSelect(), 0, 15, null, null),
+        cmds
           .condition()
           .reachPosition(undefined, 1380)
-          .then([
-            controlArray[index].action().stopMoving(),
-          ]),
+          .then([cmds.action().stopMoving()]),
       ]);
     }
     //给所有运动物体创建onNexusEvent条件以便召回
-    controlArray[index].run([
-      controlArray[index]
+    controlArray[index].run((cmds) => [
+      cmds
         .condition()
         .onNexusEvent(interactNexus, 1001 + index)
         .then([
@@ -171,16 +159,16 @@ const sag = () => {
 
 const fireNeEvent = () => {
   controlArray.forEach((item, index) => {
-    item.run([
-      item.action().stopMoving(),
-      item.state().fireNexusEvent(interactNexus, 1001 + index),
+    item.run((cmds) => [
+      cmds.action().stopMoving(),
+      cmds.state().fireNexusEvent(interactNexus, 1001 + index),
     ]);
   });
 };
 //往回恢复的函数
 const recover = (index) => {
-  controlArray[index].run([
-    controlArray[index]
+  controlArray[index].run((cmds) => [
+    cmds
       .action()
       .moveTo(
         0,
@@ -189,9 +177,9 @@ const recover = (index) => {
           Math.abs(recallArray[index].y),
         recallArray[index].y / 15,
         () => {
-          controlArray[index].run([
-            controlArray[index].action().teleportTo(0, 0),
-            controlArray[index].state().clearAllConditions(),
+          controlArray[index].run((cmds) => [
+            cmds.action().teleportTo(0, 0),
+            cmds.state().clearAllConditions(),
           ]);
         }
       ),

package/ScrollBoxTest/App.vue

@@ -0,0 +1,109 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgSty">
+      <!-- 提示 -->
+      <div class="text" :style="{ left: 210, top: 20 }">
+        {{
+          "操作提示：\n触控进行左右拖拽\n点击进度条空白处游标直接跳过去\n按 返回 键退出"
+        }}
+      </div>
+      <div
+        class="logo-bg"
+        :style="{
+          left: 210,
+          top: 160,
+        }"
+      >
+        <!-- 三个背景色块,用来确认进度条的透明度 -->
+        <div class="bg1" />
+        <div class="bg2" />
+        <div class="bg3" />
+        <!-- 进度条 -->
+        <SizeDivBar :top="80" :left="0" />
+        <ClipBar :top="210" :left="0" />
+        <NinePatchBar :top="340" :left="0" />
+        <!-- 图1说明 -->
+        <div :style="{ left: 0, top: 26 }" class="text">
+          {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import NoBackgroundBar from "./NoBackgroundBar.vue";
+import ClipBar from "./ClipBar.vue";
+import NinePatchBar from "./NinePatchBar.vue";
+import SizeDivBar from "./SizeDivBar.vue";
+
+// //进度百分比
+// let myProgress = shallowRef(20);
+// //按键事件 控制进度条的width
+const procKeyDown = (ev) => {
+  //   switch (ev.keyCode) {
+  //     case 37:
+  //       myProgress.value -= 5;
+  //       if (myProgress.value <= 0) {
+  //         myProgress.value = 0;
+  //       }
+  //       break;
+  //     case 39:
+  //       myProgress.value += 5;
+  //       if (myProgress.value >= 100) {
+  //         myProgress.value = 100;
+  //       }
+  //       break;
+  //     case 13:
+  //       myProgress.value = 0;
+  //       break;
+  //     default:
+  //       break;
+  //   }
+};
+
+onMounted(() => {});
+</script>
+
+<style scoped>
+.bgSty {
+  background-color: #5490d1;
+  width: 1280;
+  height: 720;
+}
+.logo-bg {
+  width: 800;
+  height: 400;
+}
+.text {
+  width: 800;
+  height: 200;
+  font-size: 24;
+  font-weight: bold;
+  line-height: 32;
+  color: #ffffff;
+  text-align: center;
+}
+.bg1 {
+  left: 0;
+  top: 0;
+  height: 500;
+  width: 267;
+  background-color: #007f00;
+}
+.bg2 {
+  left: 267;
+  top: 0;
+  height: 500;
+  width: 267;
+  background-color: #3049b8;
+}
+.bg3 {
+  left: 534;
+  top: 0;
+  height: 500;
+  width: 266;
+  background-color: #d12b8c;
+}
+</style>