project init & fix ui

miniprogram_npm/tdesign-miniprogram/mixins/page-scroll.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+declare type IPageScrollOption = WechatMiniprogram.Page.IPageScrollOption;
+declare type Scroller = (this: WechatMiniprogram.Component.TrivialInstance, event?: IPageScrollOption) => void;
+declare const _default: (scroller: Scroller) => string;
+export default _default;

miniprogram_npm/tdesign-miniprogram/mixins/page-scroll.js

@@ -0,0 +1,37 @@
+import { getCurrentPage } from '../common/utils';
+const onPageScroll = function (event) {
+    const page = getCurrentPage();
+    if (!page)
+        return;
+    const { pageScroller } = page;
+    pageScroller.forEach((scroller) => {
+        if (typeof scroller === 'function') {
+            scroller(event);
+        }
+    });
+};
+export default (scroller) => {
+    return Behavior({
+        attached() {
+            const page = getCurrentPage();
+            if (!page)
+                return;
+            const bindScroller = scroller.bind(this);
+            if (Array.isArray(page.pageScroller)) {
+                page.pageScroller.push(bindScroller);
+            }
+            else {
+                page.pageScroller =
+                    typeof page.onPageScroll === 'function' ? [page.onPageScroll.bind(page), bindScroller] : [bindScroller];
+            }
+            page.onPageScroll = onPageScroll;
+        },
+        detached() {
+            var _a;
+            const page = getCurrentPage();
+            if (!page)
+                return;
+            page.pageScroller = ((_a = page.pageScroller) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== scroller)) || [];
+        },
+    });
+};

miniprogram_npm/tdesign-miniprogram/mixins/touch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

miniprogram_npm/tdesign-miniprogram/mixins/touch.js

@@ -0,0 +1,35 @@
+const MinDistance = 10;
+const getDirection = (x, y) => {
+    if (x > y && x > MinDistance) {
+        return 'horizontal';
+    }
+    if (y > x && y > MinDistance) {
+        return 'vertical';
+    }
+    return '';
+};
+export default Behavior({
+    methods: {
+        resetTouchStatus() {
+            this.direction = '';
+            this.deltaX = 0;
+            this.deltaY = 0;
+            this.offsetX = 0;
+            this.offsetY = 0;
+        },
+        touchStart(event) {
+            this.resetTouchStatus();
+            const [touch] = event.touches;
+            this.startX = touch.clientX;
+            this.startY = touch.clientY;
+        },
+        touchMove(event) {
+            const [touch] = event.touches;
+            this.deltaX = touch.clientX - this.startX;
+            this.deltaY = touch.clientY - this.startY;
+            this.offsetX = Math.abs(this.deltaX);
+            this.offsetY = Math.abs(this.deltaY);
+            this.direction = getDirection(this.offsetX, this.offsetY);
+        },
+    },
+});

miniprogram_npm/tdesign-miniprogram/mixins/transition.d.ts

@@ -0,0 +1 @@
+export default function transition(): string;

miniprogram_npm/tdesign-miniprogram/mixins/transition.js

@@ -0,0 +1,123 @@
+import config from '../common/config';
+const { prefix } = config;
+export default function transition() {
+    return Behavior({
+        properties: {
+            visible: {
+                type: Boolean,
+                value: null,
+                observer: 'watchVisible',
+            },
+            appear: Boolean,
+            name: {
+                type: String,
+                value: 'fade',
+            },
+            durations: {
+                type: Number,
+                optionalTypes: [Array],
+            },
+        },
+        data: {
+            transitionClass: '',
+            transitionDurations: 300,
+            className: '',
+            realVisible: false,
+        },
+        created() {
+            this.status = '';
+            this.transitionT = 0;
+        },
+        attached() {
+            this.durations = this.getDurations();
+            if (this.data.visible) {
+                this.enter();
+            }
+            this.inited = true;
+        },
+        detached() {
+            clearTimeout(this.transitionT);
+        },
+        methods: {
+            watchVisible(curr, prev) {
+                if (this.inited && curr !== prev) {
+                    curr ? this.enter() : this.leave();
+                }
+            },
+            getDurations() {
+                const { durations } = this.data;
+                if (Array.isArray(durations)) {
+                    return durations.map((item) => Number(item));
+                }
+                return [Number(durations), Number(durations)];
+            },
+            enter() {
+                const { name } = this.data;
+                const [duration] = this.durations;
+                this.status = 'entering';
+                this.setData({
+                    realVisible: true,
+                    transitionClass: `${prefix}-${name}-enter ${prefix}-${name}-enter-active`,
+                });
+                setTimeout(() => {
+                    this.setData({
+                        transitionClass: `${prefix}-${name}-enter-active ${prefix}-${name}-enter-to`,
+                    });
+                }, 30);
+                if (typeof duration === 'number' && duration > 0) {
+                    this.transitionT = setTimeout(this.entered.bind(this), duration + 30);
+                }
+            },
+            entered() {
+                this.customDuration = false;
+                clearTimeout(this.transitionT);
+                this.status = 'entered';
+                this.setData({
+                    transitionClass: '',
+                });
+            },
+            leave() {
+                const { name } = this.data;
+                const [, duration] = this.durations;
+                this.status = 'leaving';
+                this.setData({
+                    transitionClass: `${prefix}-${name}-leave  ${prefix}-${name}-leave-active`,
+                });
+                clearTimeout(this.transitionT);
+                setTimeout(() => {
+                    this.setData({
+                        transitionClass: `${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`,
+                    });
+                }, 30);
+                if (typeof duration === 'number' && duration > 0) {
+                    this.customDuration = true;
+                    this.transitionT = setTimeout(this.leaved.bind(this), duration + 30);
+                }
+            },
+            leaved() {
+                this.customDuration = false;
+                this.triggerEvent('leaved');
+                clearTimeout(this.transitionT);
+                this.status = 'leaved';
+                this.setData({
+                    transitionClass: '',
+                });
+            },
+            onTransitionEnd() {
+                if (this.customDuration) {
+                    return;
+                }
+                clearTimeout(this.transitionT);
+                if (this.status === 'entering' && this.data.visible) {
+                    this.entered();
+                }
+                else if (this.status === 'leaving' && !this.data.visible) {
+                    this.leaved();
+                    this.setData({
+                        realVisible: false,
+                    });
+                }
+            },
+        },
+    });
+}