@shijiu/jsview-vue-samples 2.2.201 → 2.2.426-test.0

package/TouchSample/MetroWidgetVertical.vue

@@ -1,144 +0,0 @@
-<script>
-import {
-  VERTICAL,
-  MetroWidget,
-  WholePageSlide,
-  SeamlessSlide,
-  FixPositionSlide,
-} from "jsview";
-
-import Item from "./Item.vue";
-
-import { metroWidgetV, measures } from "./data.js";
-import { ref } from "vue";
-
-export default {
-  components: {
-    MetroWidget,
-    Item,
-  },
-  setup() {
-    return {
-      measures,
-      name: "/metroWidgetH",
-      direction: VERTICAL,
-      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: 300,
-      CONST_ITEM_HEIGHT: 100,
-    };
-  },
-  methods: {
-    _provideData() {
-      return metroWidgetV;
-    },
-  },
-
-  mounted() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <div :style="{ width: 1280, height: 720, left: 50, overflow: 'hidden' }">
-      <div
-        :style="{
-          left: 0,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: 40,
-          color: '#fff753',
-        }"
-      >
-        整页滑动
-      </div>
-      <div
-        :style="{
-          left: 200,
-          width: CONST_ITEM_WIDTH + 20,
-          height: CONST_ITEM_HEIGHT * 5 + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetVertical1"
-          :width="CONST_ITEM_WIDTH + 20"
-          :height="CONST_ITEM_HEIGHT * 5 + 20"
-          :direction="direction"
-          :measures="measures"
-          :provideData="_provideData"
-          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
-          :enableTouch="true"
-          :flingPageWidth="CONST_ITEM_HEIGHT * 5"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            /> </template
-        ></metro-widget>
-      </div>
-      <div
-        :style="{
-          left: 600,
-          width: 200,
-          height: 40,
-          fontSize: 25,
-          lineHeight: 40,
-          color: '#fff753',
-        }"
-      >
-        普通滑动
-      </div>
-      <div
-        :style="{
-          left: 800,
-          width: CONST_ITEM_WIDTH + 20,
-          height: CONST_ITEM_HEIGHT * 5 + 20,
-          backgroundColor: '#ff0000',
-        }"
-      >
-        <metro-widget
-          name="simpleWidgetVertical2"
-          :width="CONST_ITEM_WIDTH + 20"
-          :height="CONST_ITEM_HEIGHT * 5 + 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>

package/TouchSample/TouchContainerHorizontal.vue

@@ -1,160 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:21:02
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:40:19
- * @Description: file content
--->
-<script>
-import {
-  JsvTouchContainer,
-  DIRECTION_VERTICAL,
-  DIRECTION_HORIZONTAL,
-  DIRECTION_DISABLE,
-} from "jsview";
-import { touchContainerH, measures } from "./data.js";
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-export default {
-  components: {
-    JsvTouchContainer,
-  },
-  setup() {
-    return {
-      DIRECTION_VERTICAL,
-      DIRECTION_HORIZONTAL,
-      DIRECTION_DISABLE,
-      touchContainerH,
-      measures,
-      randomColor,
-    };
-  },
-  methods: {
-    _onClick(msg) {
-      console.log(`_onClick:${JSON.stringify(msg)}`);
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
-    <jsv-touch-container
-      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
-      :direction="DIRECTION_VERTICAL"
-      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
-    >
-      <div
-        :style="{
-          left: 30,
-          top: 0,
-          width: 400,
-          height: 30,
-          fontSize: 18,
-          lineHeight: 30,
-          color: '#f0ef29',
-        }"
-      >
-        整屏幕滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 0,
-          top: 40,
-          width: (1280 - 60) * 5,
-          height: 220,
-          backgroundColor: 'rgba(255,0,0,0.5)',
-        }"
-        :direction="DIRECTION_HORIZONTAL"
-        :flingPageWidth="1280 - 60"
-        :dragLimitArea="{ x: 0, y: 0, width: 1280 - 60, height: 220 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerH"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: (1280 - 60) * tabIndex,
-            top: 0,
-            width: 1280 - 60,
-            height: 220,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-
-      <div
-        :style="{
-          left: 30,
-          top: 280,
-          width: 400,
-          height: 40,
-          fontSize: 18,
-          lineHeight: 40,
-          color: '#f0ef29',
-        }"
-      >
-        左右滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 0,
-          top: 320,
-          width: (1280 - 60) * 5,
-          height: 220,
-          backgroundColor: '#1d9797',
-        }"
-        :direction="DIRECTION_HORIZONTAL"
-        :dragLimitArea="{ x: 0, y: 0, width: 1280 - 60, height: 220 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerH"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: (1280 - 60) * tabIndex,
-            top: 0,
-            width: 1280 - 60,
-            height: 220,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-    </jsv-touch-container>
-  </div>
-</template>

package/TouchSample/TouchContainerVertical.vue

@@ -1,160 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:21:02
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 09:04:26
- * @Description: file content
--->
-<script>
-import {
-  JsvTouchContainer,
-  DIRECTION_VERTICAL,
-  DIRECTION_HORIZONTAL,
-  DIRECTION_DISABLE,
-} from "jsview";
-import { touchContainerV, measures } from "./data.js";
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-export default {
-  components: {
-    JsvTouchContainer,
-  },
-  setup() {
-    return {
-      DIRECTION_VERTICAL,
-      DIRECTION_HORIZONTAL,
-      DIRECTION_DISABLE,
-      touchContainerV,
-      measures,
-      randomColor,
-    };
-  },
-  methods: {
-    _onClick(msg) {
-      console.log(`_onClick:${JSON.stringify(msg)}`);
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
-    <jsv-touch-container
-      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
-      :direction="DIRECTION_HORIZONTAL"
-      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
-    >
-      <div
-        :style="{
-          left: 30,
-          top: 0,
-          width: 400,
-          height: 40,
-          fontSize: 25,
-          lineHeight: 40,
-          color: '#f0ef29',
-        }"
-      >
-        整屏幕滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 30,
-          top: 50,
-          width: 400,
-          height: 500 * 5,
-          backgroundColor: '#810000',
-        }"
-        :direction="DIRECTION_VERTICAL"
-        :flingPageWidth="500"
-        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerV"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: 0,
-            top: 500 * tabIndex,
-            width: 400,
-            height: 500,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-
-      <div
-        :style="{
-          left: 530,
-          top: 0,
-          width: 400,
-          height: 40,
-          fontSize: 25,
-          lineHeight: 40,
-          color: '#f0ef29',
-        }"
-      >
-        上下滑动
-      </div>
-      <jsv-touch-container
-        :style="{
-          left: 530,
-          top: 50,
-          width: 400,
-          height: 500 * 5,
-          backgroundColor: '#810000',
-        }"
-        :direction="DIRECTION_VERTICAL"
-        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
-      >
-        <div
-          v-for="(tabList, tabIndex) in touchContainerV"
-          :key="'tab' + tabIndex"
-          :style="{
-            left: 0,
-            top: 500 * tabIndex,
-            width: 400,
-            height: 500,
-            backgroundColor: randomColor(),
-          }"
-        >
-          <jsv-touch-container
-            v-for="(item, itemIndex) in tabList"
-            :key="'tab' + tabIndex + '-' + itemIndex"
-            :style="{
-              left: item.left,
-              top: item.top,
-              width: item.width,
-              height: item.height,
-              backgroundColor: item.backgroundColor,
-              fontSize: 18,
-            }"
-            :onClick="_onClick"
-            :direction="DIRECTION_DISABLE"
-            >{{ item.content }}</jsv-touch-container
-          >
-        </div>
-      </jsv-touch-container>
-    </jsv-touch-container>
-  </div>
-</template>

package/TouchSample/data.js

@@ -1,81 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2022-04-10 21:23:15
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 10:03:21
- * @Description: file content
- */
-function randomColor() {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-}
-
-const metroWidgetH = [];
-for (let i = 0; i < 500; i++) {
-  metroWidgetH.push({
-    content: i,
-    id: i,
-    width: 100,
-    height: 200,
-    color: randomColor(),
-  });
-}
-
-const metroWidgetV = [];
-for (let i = 0; i < 500; i++) {
-  metroWidgetV.push({
-    content: i,
-    id: i,
-    width: 200,
-    height: 100,
-    color: randomColor(),
-  });
-}
-
-const touchContainerH = [];
-for (let i = 0; i < 5; i++) {
-  const tabData = [];
-  for (let i = 0; i < 20; i++) {
-    tabData.push({
-      content: i,
-      id: i,
-      left: (122 / 2) * i,
-      top: 10,
-      width: 122 / 2 - 10,
-      height: 200,
-      backgroundColor: randomColor(),
-    });
-  }
-  touchContainerH.push(tabData);
-}
-
-const touchContainerV = [];
-for (let i = 0; i < 5; i++) {
-  const tabData = [];
-  for (let i = 0; i < 20; i++) {
-    tabData.push({
-      content: i,
-      id: i,
-      left: 10,
-      top: 50 * i,
-      width: 300,
-      height: 40,
-      backgroundColor: randomColor(),
-    });
-  }
-  touchContainerV.push(tabData);
-}
-
-function measures(item) {
-  return item;
-}
-
-export {
-  metroWidgetH,
-  metroWidgetV,
-  touchContainerH,
-  touchContainerV,
-  measures,
-};