123

app/app.vue

@@ -14,6 +14,31 @@ const mode = computed(() => {
   return color.value
 })
 
+// 添加路由中间件来处理过渡方向
+const router = useRouter()
+const route = useRoute()
+const slideDirection = ref('slide-left')
+
+// 记录路由历史
+const routeHistory = ref([])
+
+router.beforeEach((to, from) => {
+  // 记录路由历史
+  routeHistory.value.push(from.path)
+  
+  // 如果是返回操作（在历史记录中找到目标路由）
+  if (routeHistory.value.includes(to.path)) {
+    slideDirection.value = 'slide-right'
+    // 清除历史记录到返回的位置
+    const index = routeHistory.value.indexOf(to.path)
+    routeHistory.value = routeHistory.value.slice(0, index)
+  } else {
+    slideDirection.value = 'slide-left'
+  }
+})
+
+// 提供过渡名称给页面组件
+provide('slideDirection', slideDirection)
 </script>
 
 <template>
@@ -21,20 +46,36 @@ const mode = computed(() => {
     <NuxtLoadingIndicator
       color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
     <NuxtLayout>
-      <NuxtPage/>
+      <NuxtPage :transition="{
+        name: slideDirection
+      }" />
     </NuxtLayout>
   </VanConfigProvider>
 </template>
 
 <style>
-.page-enter-active,
+.slide-left-enter-active,
-.page-leave-active {
+.slide-left-leave-active,
-  transition: all 0.2s;
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  width: 100%;
 }
 
-.page-enter-from,
+.slide-left-enter-from {
-.page-leave-to {
+  transform: translateX(100%);
-  opacity: 0;
+}
-  filter: blur(1rem);
+
+.slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+.slide-right-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-right-leave-to {
+  transform: translateX(100%);
 }
 </style>

app/pages/home/components/ItemList/index.vue

@@ -0,0 +1,81 @@
+<script setup>
+
+import Column from "@/pages/home/components/Column/index.vue";
+import {artworkList} from "@/api/goods/index.js";
+import {homeStore} from "~/stores/goods/index.js";
+const loading = ref(false);
+const finished = ref(false);
+const {fullLive,actionDetails,itemList} = homeStore();
+const list = ref([{
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: 'RMB 10,000',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: 'RMB 10,000',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: 'RMB 10,000',
+}])
+const columns = computed(() => {
+  const result = [[], []];
+  // 确保 itemList 有值
+  if (itemList.value && itemList.value.length > 0) {
+    itemList.value.forEach((item, index) => {
+      result[index % 2].push(item);
+    });
+  }
+  return result;
+});
+const loadData = async () => {
+  // 加载数据逻辑...
+
+};
+
+</script>
+
+<template>
+  <div class="px-[16px] pt-[16px]">
+    <van-pull-refresh>
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
+        <div class="w-full flex gap-[16px]">
+          <Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" />
+        </div>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

nuxt.config.js

@@ -90,9 +90,9 @@ export default defineNuxtConfig({
   },
 
   app: {
-    pageTransition: {
+    layoutTransition: { 
-      name: 'page',
+      name: 'layout',
-      mode: 'out-in',
+      mode: 'out-in'
     },
     head: {
       viewport: 'width=device-width,initial-scale=1,viewport-fit=cover',