@vue-lynx-example/swiper 0.1.1

package/src/SwiperMTS/Swiper.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useMainThreadRef } from 'vue-lynx';
+import SwiperItem from '../Components/SwiperItem.vue';
+
+declare const SystemInfo: { pixelWidth: number; pixelRatio: number };
+
+const props = withDefaults(defineProps<{
+  data: string[];
+  itemWidth?: number;
+}>(), {
+  itemWidth: () => SystemInfo.pixelWidth / SystemInfo.pixelRatio,
+});
+
+// --- Main Thread refs ---
+const containerRef = useMainThreadRef<unknown>(null);
+const currentOffsetRef = useMainThreadRef<number>(0);
+const touchStartXRef = useMainThreadRef<number>(0);
+const touchStartOffsetRef = useMainThreadRef<number>(0);
+
+// --- MTS touch handlers ---
+const handleTouchStart = (e: { touches: Array<{ clientX: number }> }) => {
+  'main thread';
+  touchStartXRef.current = e.touches[0].clientX;
+  touchStartOffsetRef.current = currentOffsetRef.current;
+};
+
+const handleTouchMove = (e: { touches: Array<{ clientX: number }> }) => {
+  'main thread';
+  const delta = e.touches[0].clientX - touchStartXRef.current;
+  const offset = touchStartOffsetRef.current + delta;
+  currentOffsetRef.current = offset;
+  const el = containerRef as unknown as {
+    current?: { setStyleProperty?(k: string, v: string): void };
+  };
+  if (el.current?.setStyleProperty) {
+    el.current.setStyleProperty('transform', `translateX(${offset}px)`);
+  }
+};
+
+const handleTouchEnd = () => {
+  'main thread';
+  touchStartXRef.current = 0;
+  touchStartOffsetRef.current = 0;
+};
+</script>
+
+<template>
+  <view class="swiper-wrapper">
+    <view
+      class="swiper-container"
+      :main-thread-ref="containerRef"
+      :main-thread-bindtouchstart="handleTouchStart"
+      :main-thread-bindtouchmove="handleTouchMove"
+      :main-thread-bindtouchend="handleTouchEnd"
+    >
+      <SwiperItem
+        v-for="(pic, index) in data"
+        :key="index"
+        :pic="pic"
+        :item-width="props.itemWidth"
+      />
+    </view>
+  </view>
+</template>

package/src/SwiperMTS/index.ts

@@ -0,0 +1,17 @@
+import { createApp, defineComponent, h } from 'vue-lynx';
+
+import '../swiper.css';
+import Swiper from './Swiper.vue';
+import Page from '../Components/Page.vue';
+import { picsArr } from '../utils/pics.js';
+
+const App = defineComponent({
+  setup() {
+    return () =>
+      h(Page, null, {
+        default: () => h(Swiper, { data: picsArr }),
+      });
+  },
+});
+
+createApp(App).mount();

package/src/shims-vue.d.ts

@@ -0,0 +1,11 @@
+declare module '*.vue' {
+  import type { Component } from 'vue-lynx';
+
+  const component: Component;
+  export default component;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}

package/src/swiper.css

@@ -0,0 +1,144 @@
+/* Safe Area */
+.safe-area {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: #000;
+}
+.safe-area.android {
+  padding-bottom: 0;
+}
+
+/* NavBar */
+.nav-bar {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+  background: black;
+}
+.nav-bar .left-icon {
+  width: 24px;
+  height: 24px;
+  margin-left: 20px;
+}
+.nav-bar .right-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 27px;
+}
+.nav-bar .nav-title {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 500;
+  color: white;
+}
+
+/* Page */
+.page-container {
+  flex: 1;
+  width: 100%;
+  padding-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #000;
+}
+.card-detail-container {
+  position: absolute;
+  width: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(17, 17, 19, 0.00) 29.47%,
+    #111113 99.97%
+  );
+  bottom: 75px;
+}
+.card-detail {
+  background-color: #282e38;
+  border-radius: 12px;
+  width: calc(100% - 40px);
+  margin: 0 20px 18px 20px;
+  padding: 21px;
+}
+.card-detail-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+.card-detail-title-price {
+  font-size: 24px;
+  color: #ff6740;
+}
+.card-detail-amount {
+  color: rgba(255, 255, 255, 0.85);
+  text-align: right;
+  font-size: 12px;
+}
+.card-detail-desc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-detail-desc-text {
+  font-size: 17px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.order-button {
+  background-color: #ff6740;
+  border-radius: 8px;
+  width: calc(100% - 40px);
+  margin: 0 20px;
+  padding: 13px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.order-text {
+  font-size: 17px;
+  color: #fff;
+}
+
+/* Indicator */
+.indicator {
+  position: absolute;
+  bottom: 140px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.indicator .indicator-item {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: 0 5px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.indicator .indicator-item.active {
+  background-color: #ff6740;
+}
+
+/* Swiper */
+.swiper-wrapper {
+  flex: 1;
+  width: 100%;
+}
+.swiper-container {
+  display: linear;
+  linear-orientation: horizontal;
+  height: 100%;
+}
+.swiper-item {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}

package/src/utils/const.ts

@@ -0,0 +1,15 @@
+export const colorsArr = [
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'purple',
+  'orange',
+  'pink',
+  'brown',
+  'gray',
+  'black',
+  'white',
+];
+
+export const SWIPER_ITEM_WIDTH = 300;

package/src/utils/pics.ts

@@ -0,0 +1,21 @@
+import pic1 from '../assets/1.png';
+import pic2 from '../assets/2.png';
+import pic3 from '../assets/3.png';
+import pic4 from '../assets/4.png';
+import pic5 from '../assets/5.png';
+import pic6 from '../assets/6.png';
+import pic7 from '../assets/7.png';
+import pic8 from '../assets/8.png';
+
+export const pics = [
+  { src: pic1, width: 511, height: 437 },
+  { src: pic2, width: 1024, height: 1589 },
+  { src: pic3, width: 510, height: 418 },
+  { src: pic4, width: 509, height: 438 },
+  { src: pic5, width: 1024, height: 1557 },
+  { src: pic6, width: 509, height: 415 },
+  { src: pic7, width: 509, height: 426 },
+  { src: pic8, width: 1024, height: 1544 },
+];
+
+export const picsArr = pics.slice(0, 8).map((pic) => pic.src);

package/src/utils/useAnimate.ts

@@ -0,0 +1,106 @@
+import { useMainThreadRef } from 'vue-lynx';
+
+export interface AnimationOptions {
+  from: number;
+  to: number;
+  duration?: number;
+  delay?: number;
+  easing?: (t: number) => number;
+  onUpdate?: (value: number) => void;
+  onComplete?: () => void;
+}
+
+// Common easing functions
+export const easings = {
+  linear: (t: number) => {
+    'main thread';
+    return t;
+  },
+  easeInQuad: (t: number) => {
+    'main thread';
+    return t * t;
+  },
+  easeOutQuad: (t: number) => {
+    'main thread';
+    return 1 - (1 - t) * (1 - t);
+  },
+  easeInOutQuad: (t: number) => {
+    'main thread';
+    return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+  },
+};
+
+function animateInner(options: AnimationOptions) {
+  'main thread';
+  const {
+    from,
+    to,
+    duration = 5000,
+    delay = 0,
+    easing = easings.easeInOutQuad,
+    onUpdate,
+    onComplete,
+  } = options;
+
+  let startTs = 0;
+  let rafId = 0;
+
+  function tick(ts: number) {
+    const progress =
+      Math.max(Math.min(((ts - startTs - delay) * 100) / duration, 100), 0)
+      / 100;
+
+    const easedProgress = easing(progress);
+    const currentValue = from + (to - from) * easedProgress;
+    onUpdate?.(currentValue);
+  }
+
+  function updateRafId(id: number) {
+    rafId = id;
+  }
+
+  function step(ts: number) {
+    if (!startTs) {
+      startTs = Number(ts);
+    }
+    // make sure progress can reach 100%
+    if (ts - startTs <= duration + 100) {
+      tick(ts);
+      updateRafId(requestAnimationFrame(step));
+    } else {
+      onComplete?.();
+    }
+  }
+
+  updateRafId(requestAnimationFrame(step));
+
+  function cancel() {
+    cancelAnimationFrame(rafId);
+  }
+
+  return {
+    cancel,
+  };
+}
+
+export function useAnimate() {
+  const lastCancelRef = useMainThreadRef<(() => void) | null>(null);
+
+  function cancel() {
+    'main thread';
+    lastCancelRef.current?.();
+  }
+
+  function animate(options: AnimationOptions) {
+    'main thread';
+    cancel();
+
+    const { cancel: innerCancel } = animateInner(options);
+    lastCancelRef.current = innerCancel;
+  }
+
+  return {
+    cancel,
+    animate,
+  };
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+  },
+  "include": ["src", "lynx.config.ts"],
+}