animate

src/modules/list/actions/animate.ts

@@ -0,0 +1,11 @@
+import ListModule from "..";
+
+export default ListModule.action({
+  initAnimateAttr() {
+    const animate = localStorage.getItem("animate");
+    if (!animate) {
+      return;
+    }
+    this.store.animate = JSON.parse(animate);
+  },
+});

src/modules/list/actions/canvas.ts

@@ -14,9 +14,11 @@ export default ListModule.action({
     const canvas = {
       width: wWidth * scale,
       height: wHeight * scale,
-      padding: this.store.canvas.padding * scale,
+      scale: scale,
+      padding: this.store.animate.padding * scale,
       linesCount: Math.ceil(items.length / totalLines) * 2,
     };
+    console.log(canvas);
     this.store.canvas = { ...this.store.canvas, ...canvas };
 
     if (scrollType == "vertical") {
@@ -39,7 +41,7 @@ export default ListModule.action({
       for (let k = 0; k < canvas.linesCount; k++) {
         arr.push(items[(off + k) % items.length]);
       }
-      this.actions.shuffleSelf(arr, totalLines);
+      // this.actions.shuffleSelf(arr, totalLines);
       //计算总高度
       let halfOffset = 0;
       arr.forEach((item) => {
@@ -72,7 +74,7 @@ export default ListModule.action({
       for (let k = 0; k < canvas.linesCount; k++) {
         arr.push(items[(off + k) % items.length]);
       }
-      this.actions.shuffleSelf(arr, canvas.linesCount);
+      // this.actions.shuffleSelf(arr, canvas.linesCount);
 
       //计算总高度
       let halfOffset = 0;
@@ -131,7 +133,9 @@ export default ListModule.action({
         //   console.log(item.offset);
         if (item.offset >= item.halfOffset) item.offset -= item.halfOffset;
         if (item.offset < 0) item.offset += item.halfOffset;
+        this.store.canvas.linesData[n] = item;
       }
+
       cacheCtx?.clearRect(0, 0, storeCanvas.width, storeCanvas.height);
       n = storeCanvas.linesData.length;
       for (i = 0; i < n; i++) {

src/modules/list/actions/index.ts

@@ -2,5 +2,6 @@ import dialog from "./dialog";
 import load from "./load";
 
 import canvas from "./canvas";
+import animate from "./animate";
 
-export default [load, dialog, canvas];
+export default [load, dialog, canvas, animate];

src/modules/list/index.ts

@@ -1,8 +1,7 @@
 import { PageListController } from "@queenjs/controllers";
-import { ModuleRoot, RequestConfig } from "queenjs";
+import { ModuleRoot } from "queenjs";
 import actions from "./actions";
 import { https } from "./http";
-import { ItemObject } from "./objects/item";
 import { stores } from "./stores";
 
 export default class ListModule extends ModuleRoot {
@@ -20,6 +19,7 @@ export default class ListModule extends ModuleRoot {
 
   onReady() {
     this.controls.backendList.setCrudPrefix("/antique");
+    this.actions.initAnimateAttr();
   }
 }
 export const { useList, initList, setList } = ListModule.hook("List");

src/modules/list/objects/canvas.ts

@@ -15,8 +15,9 @@ export function InitCanvasDragEvent(
   let moving = false;
   const fingers: { [name: number]: any } = {};
   const scrollType = this.store.animate.scrollType;
-  const canvasData = this.store.canvas;
+
   const onMouseDown = (e: MouseEvent) => {
+    const canvasData = this.store.canvas;
     const x = e.clientX * canvasData.scale;
     const y = e.clientY * canvasData.scale;
     downY = e.clientY * canvasData.scale;
@@ -26,13 +27,13 @@ export function InitCanvasDragEvent(
       scrollType == "vertical"
         ? Math.floor(x / (canvasData.itemOffset + canvasData.padding))
         : Math.floor(y / (canvasData.itemOffset + canvasData.padding));
-
     canvasData.linesData[downIndex].dragging = true;
     initOffset = canvasData.linesData[downIndex].offset;
     downTime = Date.now();
   };
 
   const onMouseMove = (e: MouseEvent) => {
+    const canvasData = this.store.canvas;
     if (!down || downIndex < 0) return;
     moving = true;
 
@@ -48,13 +49,14 @@ export function InitCanvasDragEvent(
     canvasData.linesData[downIndex].offset = initOffset + dtaOffset;
   };
   const onMouseUp = (e: MouseEvent) => {
-    console.log("up");
+    const canvasData = this.store.canvas;
     down = false;
     if (downIndex >= 0) {
       canvasData.linesData[downIndex].dragging = false;
       const dtaTime = Date.now() - downTime;
       if (dtaTime < 200 && !moving) {
         const line = canvasData.linesData[downIndex];
+
         let offset = line.offset;
         if (offset >= line.halfOffset) offset -= line.halfOffset;
         if (offset < 0) offset += line.halfOffset;
@@ -89,6 +91,7 @@ export function InitCanvasDragEvent(
     moving = false;
   };
   const onTouchstart = (e: TouchEvent) => {
+    const canvasData = this.store.canvas;
     const touches = e.touches;
     for (let i = 0; i < touches.length; i++) {
       const touch = touches[i];
@@ -114,6 +117,7 @@ export function InitCanvasDragEvent(
     }
   };
   const onTouchMove = (e: TouchEvent) => {
+    const canvasData = this.store.canvas;
     const touches = e.changedTouches;
     for (let i = 0; i < touches.length; i++) {
       const touch = touches[i];
@@ -134,6 +138,7 @@ export function InitCanvasDragEvent(
   };
 
   const onTouchEnd = (e: TouchEvent) => {
+    const canvasData = this.store.canvas;
     const touches = e.changedTouches;
     for (let i = 0; i < touches.length; i++) {
       const touch = touches[i];

src/modules/list/stores.ts

@@ -10,8 +10,9 @@ export const stores = ListModule.store({
     parentWidth: 0,
     parentHeight: 0,
     animate: {
-      scrollType: "horizontal", // 滚动方式 vertical horizontal
+      scrollType: "vertical", // 滚动方式 vertical horizontal
       totalLines: 8, //行数或列数
+      padding: 12, //间距
       scrollSpeed: 1,
     },
     canvas: {

src/pages/website/routes/backend/index.tsx

@@ -3,6 +3,7 @@ import { defineComponent, reactive } from "vue";
 
 import { useList } from "@/modules/list";
 import { Button, Card, Form, Input, Radio, InputNumber } from "ant-design-vue";
+import { queenApi } from "queenjs";
 const layout = {
   labelCol: { span: 6 },
   wrapperCol: { span: 18 },
@@ -14,7 +15,10 @@ export default defineComponent({
       ...store.animate,
     });
     const submit = () => {
-      console.log(1);
+      const animate = { ...store.animate, ...formState };
+      store.animate = animate;
+      localStorage.setItem("animate", JSON.stringify(animate));
+      queenApi.router.replace("/");
     };
     return () => (
       <div class={ViewStyle}>
@@ -32,6 +36,13 @@ export default defineComponent({
               step={1}
             />
           </Form.Item>
+          <Form.Item label="间距">
+            <InputNumber
+              v-model={[formState.padding, "value"]}
+              min={1}
+              step={1}
+            />
+          </Form.Item>
           <Form.Item label="滚动速度">
             <InputNumber
               v-model={[formState.scrollSpeed, "value"]}

src/pages/website/routes/list/dialog.tsx

@@ -85,6 +85,10 @@ export default defineComponent({
         state.dialogId = "";
         closeTimeStart();
       });
+
+      initEvent();
+    });
+    const initEvent = () => {
       window.addEventListener("message", (e) => {
         const data = JSON.parse(e.data);
         if (data.type == "start") {
@@ -93,7 +97,8 @@ export default defineComponent({
           messageCloseStart(data.dialogId);
         }
       });
-    });
+    };
+
     onUnmounted(() => {
       closeTimeEnd();
     });