home1022

2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
@@ -0,0 +1,164 @@
+<template>
+    <view class="u-page">
+        <u-gap height="20" bgColor="#fff"></u-gap>
+        <u-cell-group border>
+            <u-cell
+                :titleStyle="{ fontWeight: 500 }"
+                @click="openTransition(item.mode)"
+                :title="item.title"
+                v-for="(item, index) in list"
+                :key="index"
+                clickable
+            >
+                <image
+                    slot="icon"
+                    class="u-cell-icon"
+                    :src="item.iconUrl"
+                    mode="widthFix"
+                ></image>
+            </u-cell>
+            <u-transition
+                :mode="mode"
+                :show="show"
+                :custom-style="style"
+                @click="click"
+                @beforeEnter="beforeEnter"
+                @enter="enter"
+                @afterEnter="afterEnter"
+                @beforeLeave="beforeLeave"
+                @leave="leave"
+                @afterLeave="afterLeave"
+            >
+                <view class="transition"></view>
+            </u-transition>
+        </u-cell-group>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            mode: "",
+            show: false,
+            style: {
+                position: "fixed",
+                top: `${uni.$u.sys().windowHeight / 2 - 50}px`,
+                left: `${uni.$u.sys().windowWidth / 2 - 50}px`,
+                width: "120px",
+                height: "120px",
+                backgroundColor: "#1989fa",
+            },
+            list: [
+                {
+                    mode: "fade",
+                    title: "淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fade.png",
+                },
+                {
+                    mode: "fade-up",
+                    title: "上滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeUp.png",
+                },
+                {
+                    mode: "zoom",
+                    title: "缩放",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/zoom.png",
+                },
+                {
+                    mode: "fade-zoom",
+                    title: "缩放淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeZoom.png",
+                },
+                {
+                    mode: "fade-down",
+                    title: "下滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeDown.png",
+                },
+                {
+                    mode: "fade-left",
+                    title: "左滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeLeft.png",
+                },
+                {
+                    mode: "fade-right",
+                    title: "右滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeRight.png",
+                },
+                {
+                    mode: "slide-up",
+                    title: "上滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideUp.png",
+                },
+                {
+                    mode: "slide-down",
+                    title: "下滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideDown.png",
+                },
+                {
+                    mode: "slide-left",
+                    title: "左滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideLeft.png",
+                },
+                {
+                    mode: "slide-right",
+                    title: "右滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideRight.png",
+                },
+            ],
+        };
+    },
+    mixins: [uni.$u.mixin],
+    methods: {
+        openTransition(mode) {
+            this.mode = mode;
+            this.show = true;
+            setTimeout(() => {
+                this.show = false;
+            }, 1500);
+        },
+        click() {
+            // console.log("click");
+        },
+        beforeEnter() {
+            // console.log("beforeEnter");
+        },
+        enter() {
+            // console.log("enter");
+        },
+        afterEnter() {
+            // console.log("afterEnter");
+        },
+        beforeLeave() {
+            // console.log("beforeLeave");
+        },
+        leave() {
+            // console.log("leave");
+        },
+        afterLeave() {
+            // console.log("afterLeave");
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.u-page {
+    padding: 0;
+}
+
+.transition {
+    background-color: $u-primary;
+}
+</style>