@shijiu/jsview-vue-samples 1.9.747

package/ThrowMoveDemo/TargetDemo.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 14:11:39
+ * @Description: file content
+-->
+<script>
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode === 13) {
+        let preDirection = this.direction;
+        this.direction = -this.direction;
+        this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
+          console.log(`Move end with x=${x} y=${y}`);
+        });
+        const position = (-100 * preDirection) / 2;
+        this.throwControl.throwAlongY(
+          -500 * preDirection,
+          750 * preDirection,
+          {
+            type: "catch",
+            position,
+            direction: -1 * preDirection,
+          },
+          (x, y) => {
+            console.log(`Throw end with x=${x} y=${y}`);
+          }
+        );
+        return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      拐点前触碰目标点
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/ThrowMoveDemo/UDParabolicDemo.vue

@@ -0,0 +1,121 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 14:07:16
+ * @Description: file content
+-->
+<script>
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  computed: {
+    directionDetail() {
+      return this.direction < 0 ? "上" : "下";
+    },
+    detail() {
+      return this.direction < 0 ? "向上抛物" : "向下掷物并弹起";
+    },
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      let preDirection = this.direction;
+      switch (ev.keyCode) {
+        case 13:
+          this.direction = -this.direction;
+          this.throwControl.throwAlongY(
+            -400 * preDirection,
+            550 * preDirection,
+            {
+              type: "catch",
+              position: 100 * preDirection,
+              direction: preDirection,
+            },
+            (x, y) => {
+              console.log(`Throw end with x=${x} y=${y}`);
+            }
+          );
+          return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      {{ detail }}
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${directionDetail}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/TouchSample/App.vue

@@ -0,0 +1,136 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:20:39
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 14:12:05
+ * @Description: file content
+-->
+<script>
+import MetroWidgetHorizontal from "./MetroWidgetHorizontal.vue";
+import MetroWidgetVertical from "./MetroWidgetVertical.vue";
+import TouchContainerHorizontal from "./TouchContainerHorizontal.vue";
+import TouchContainerVertical from "./TouchContainerVertical.vue";
+import { jJsvRuntimeBridge, JsvTouchContainer } from "jsview";
+
+export default {
+  components: {
+    MetroWidgetHorizontal,
+    MetroWidgetVertical,
+    TouchContainerHorizontal,
+    JsvTouchContainer,
+    TouchContainerVertical,
+  },
+  data() {
+    return {
+      metroVerticalVisible: false,
+      metroHorizontalVisible: true,
+      touchContainerHorizontalVisible: false,
+      touchContainerVerticalVisible: false,
+      head: "SimpleWidget 横向",
+    };
+  },
+  setup() {
+    const tabList = [
+      "SimpleWidget 横向",
+      "SimpleWidget 纵向",
+      "TouchContainer 横向",
+      "TouchContainer 纵向",
+    ];
+    return {
+      tabList,
+    };
+  },
+  methods: {
+    _onClick(id) {
+      switch (id) {
+        case 0:
+          this.head = "SimpleWidget 横向";
+          this.metroVerticalVisible = false;
+          this.metroHorizontalVisible = true;
+          this.touchContainerHorizontalVisible = false;
+          this.touchContainerVerticalVisible = false;
+          break;
+        case 1:
+          this.head = "SimpleWidget 纵向";
+          this.metroVerticalVisible = true;
+          this.metroHorizontalVisible = false;
+          this.touchContainerHorizontalVisible = false;
+          this.touchContainerVerticalVisible = false;
+          break;
+        case 2:
+          this.head = "TouchContainer 横向";
+          this.metroVerticalVisible = false;
+          this.metroHorizontalVisible = false;
+          this.touchContainerHorizontalVisible = true;
+          this.touchContainerVerticalVisible = false;
+          break;
+        case 3:
+          this.head = "TouchContainer 纵向";
+          this.metroVerticalVisible = false;
+          this.metroHorizontalVisible = false;
+          this.touchContainerHorizontalVisible = false;
+          this.touchContainerVerticalVisible = true;
+          break;
+        default:
+          break;
+      }
+      return true;
+    },
+  },
+  mounted() {
+    jJsvRuntimeBridge.notifyPageLoaded();
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720 * 2,
+      backgroundColor: '#1b2697',
+    }"
+  >
+    <jsv-touch-container
+      v-for="(title, index) of tabList"
+      :key="'tab' + index"
+      :style="{
+        left: 50 + 300 * index,
+        top: 10,
+        width: 280,
+        height: 50,
+        backgroundColor: '#ff0000',
+        fontSize: 18,
+        lineHeight: '50px',
+      }"
+      :onClick="
+        () => {
+          return this._onClick(index);
+        }
+      "
+      :direction="DIRECTION_DISABLE"
+    >
+      {{ title }}
+    </jsv-touch-container>
+
+    <div
+      :style="{
+        left: 30,
+        top: 60,
+        width: 400,
+        height: 50,
+        fontSize: 30,
+        lineHeight: '50px',
+        color: '#f0ef29',
+      }"
+    >
+      {{ head }}
+    </div>
+    <div :style="{ left: 30, top: 120 }">
+      <metro-widget-horizontal v-if="metroHorizontalVisible" />
+      <metro-widget-vertical v-if="metroVerticalVisible" />
+      <touch-container-horizontal v-if="touchContainerHorizontalVisible" />
+      <touch-container-vertical v-if="touchContainerVerticalVisible" />
+    </div>
+  </div>
+</template>

package/TouchSample/Item.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:21:43
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-10 21:21:44
+ * @Description: file content
+-->
+<script>
+import { getPositionRelativeToView } from "jsview";
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    test: Object,
+  },
+  data() {
+    return {
+      focused: false,
+    };
+  },
+  setup() {
+    return {
+      randomColor,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        width: this.data.width,
+        height: this.data.height,
+        color: "#FFFFFF",
+        backgroundColor: this.focused ? "#FF0000" : this.data.color,
+      };
+    },
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      console.log("cchtest item onfocus", this.data);
+    },
+
+    onBlur() {
+      this.focused = false;
+    },
+
+    onClick() {
+      console.log(`item ${this.query.id} clicked`);
+    },
+  },
+  created() {
+    // console.log("cchtest item created", this.data.content)
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+  mounted() {
+    // console.log("cchtest item mounted", this.data.content)
+  },
+  beforeUnmount() {
+    // console.log("cchtest item unmount", this.data.content)
+  },
+  updated() {
+    // console.log("cchtest item update", this.data.content)
+  },
+};
+</script>
+
+<template>
+  <div ref="element" :class="focused ? 'focus' : 'blur'" :style="style">
+    {{ data.content }}
+  </div>
+  <div
+    :style="{
+      left: data.width / 2,
+      top: data.height / 2,
+      width: 10,
+      height: 10,
+      backgroundColor: focused ? '#000000' : '#FF0000',
+    }"
+  />
+</template>
+
+<style scoped>
+.focus {
+  transform: scale3d(1, 1, 1);
+  transition: transform 0.25s linear;
+  font-size: 30px;
+}
+
+.blur {
+  transform: scale3d(1, 1, 1);
+  transition: transform 0.25s linear;
+  font-size: 30px;
+}
+</style>

package/TouchSample/MetroWidgetHorizontal.vue

@@ -0,0 +1,144 @@
+<script>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  WholePageSlide,
+  SeamlessSlide,
+  FixPositionSlide,
+} from "jsview";
+
+import Item from "./Item.vue";
+
+import { metroWidgetH, measures } from "./data.js";
+import { ref, shallowRef } from "vue";
+
+export default {
+  components: {
+    MetroWidget,
+    Item,
+  },
+  setup() {
+    return {
+      measures,
+      name: "/metroWidgetH",
+      direction: HORIZONTAL,
+      wholePageSlide: new WholePageSlide({
+        speed: 1.5,
+      }),
+      seamlessSlide: new SeamlessSlide({
+        startPercent: 0.4,
+        endPercent: 0.6,
+        speed: 0.5,
+      }),
+      fixPositionSlide: new FixPositionSlide({
+        fixPercent: 0.5,
+        speed: 0.5,
+      }),
+      token: ref(0),
+      CONST_ITEM_WIDTH: 100,
+      CONST_ITEM_HEIGHT: 200,
+    };
+  },
+  methods: {
+    _provideData() {
+      return metroWidgetH;
+    },
+  },
+
+  mounted() {},
+};
+</script>
+
+<template>
+  <div class="rootSize">
+    <div :style="{ width: 1280, height: 720, left: 50 }">
+      <div
+        :style="{
+          top: 0,
+          width: 200,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#fff753',
+        }"
+      >
+        整页滑动
+      </div>
+      <div
+        :style="{
+          top: 50,
+          width: CONST_ITEM_WIDTH * 10 + 20,
+          height: CONST_ITEM_HEIGHT + 20,
+          backgroundColor: '#ff0000',
+        }"
+      >
+        <metro-widget
+          name="simpleWidgetHorizontal1"
+          :width="CONST_ITEM_WIDTH * 10 + 20"
+          :height="CONST_ITEM_HEIGHT + 20"
+          :direction="direction"
+          :measures="measures"
+          :provideData="_provideData"
+          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+          :enableTouch="true"
+          :flingPageWidth="CONST_ITEM_WIDTH * 10"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            /> </template
+        ></metro-widget>
+      </div>
+      <div
+        :style="{
+          top: CONST_ITEM_HEIGHT + 100,
+          width: 200,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#fff753',
+        }"
+      >
+        普通滑动
+      </div>
+      <div
+        :style="{
+          top: CONST_ITEM_HEIGHT + 100 + 50,
+          width: CONST_ITEM_WIDTH * 10 + 20,
+          height: CONST_ITEM_HEIGHT + 20,
+          backgroundColor: '#ff0000',
+        }"
+      >
+        <metro-widget
+          name="simpleWidgetHorizontal2"
+          :width="CONST_ITEM_WIDTH * 10 + 20"
+          :height="CONST_ITEM_HEIGHT + 20"
+          :direction="direction"
+          :measures="measures"
+          :provideData="_provideData"
+          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+          :enableTouch="true"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            /> </template
+        ></metro-widget>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rootSize {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+</style>