Vue 3 页面转换：如何让下一页已经就位并通过滑动显示它？

Question

我正在尝试使用 Vue 3 中的 vue router 进行页面转换

我正在构建一个具有不同页面（在图像上：蓝色区域）的网站，所有页面都有滚动条和顶部的公共固定导航栏。如果您单击顶栏的其中一个链接，它应该将整个页面容器移动到底部 100vh 以显示特殊视图（在图像上：红色区域）

我的问题

• 由于黄色条已固定，我无法使其与蓝色页面一起离开，它保持固定在 y:0

• 我想避免笨拙的东西，例如快速添加 beforeRouteLeave 位置：导航栏的绝对顶部并根据滚动位置补偿顶部位置。

• 我并没有真正设法使两个视图彼此重叠，以便蓝色页面显示已经位于正确位置的红色页面。

• 我不知道该如何解决这个问题

这几天我一直在尝试不同的事情：

App.vue 中的

• 单个包含蓝色视图和红色视图。没有运气。

• App.vue 中有两个不同的 。没有运气。

• 各种级别的包装器，具有绝对值、隐藏溢出、给定 100vh 值等......不走运

我的问题

• 你知道我应该如何分割不同的部分吗？ （应用程序，包装器，子包装器，裁剪器，..）

• 可以用一个来完成吗？

• 没有超级笨拙的JS改变路线可以做到吗？

感谢您的阅读

Answer 1

我希望这个想法可以帮助你。

由于页面只是在重定向时更改的组件，因此您可以创建一个包含两个页面的页面。 例如，根据您的图片，我将有 2 页（

Red

和

Blue

）。然后，我将创建包含

Merge

和

Red

 的 

Blue

这是

Red.vue

<template>
  <div class="red-page">
    Red page
    <div style="height: 200px" />
    <div class="link" @click="$emit('redirect')">To blue</div>
  </div>
</template>

<script>
export default {
  name: 'Red',
  emits: ['redirect'],
};
</script>

<style>
.red-page {
  background-color: red;
  height: 100vh;
  color: white;
}

.link {
  cursor: pointer;
  color: white;
}
</style>

这是

Blue.vue

<template>
  <div class="blue-page">
    <div class="header" />
    <!-- Any content -->
    <div style="height: 700px" />
    <div class="link" @click="$emit('redirect')">To red</div>
  </div>
</template>

<script>
export default {
  name: 'Blue',
  emits: ['redirect'],
};
</script>

<style>
.blue-page {
  background-color: blue;
  height: 1000px;
}

.header {
  background-color: yellow;
  height: 50px;
  position: fixed;
  width: 90vw;
}

.link {
  cursor: pointer;
  color: white;
}
</style>

这是

Merge.vue

<template>
  <div>
    <Red
      style="position: fixed; height: 100vh; width: 100vw; z-index: -9999"
      @redirect="redirect(false)"
    />
    <Transition name="slide-down">
      <Blue v-if="isBlue" @redirect="redirect(true)" />
    </Transition>
  </div>
</template>

<script>
import Blue from './Blue.vue';
import Red from './Red.vue';

export default {
  name: 'Merge',
  components: { Blue, Red },

  data: () => ({
    isBlue: true,
  }),

  methods: {
    redirect(toRed) {
      this.isBlue = !toRed;
      history.pushState({}, null, this.isBlue ? '/blue' : '/red');
    },
  },

  created() {
    this.isBlue = this.$route.path === '/blue';
  },
};
</script>

<style>
.slide-down-enter-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-down-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(1000px);
}
</style>

将

Red

和

Blue

放入

Merge

内。然后用

Blue

包裹

<Transition/>

。这样，您可以为

Blue

添加过渡，并使其向下滑动以显示

Red

。最后，在

Red

和

Blue

内，当您尝试重定向时发出一些信号

详细信息在这里：https://stackblitz.com/edit/vue-fyebnk

在此示例中，我使

Blue

在转到

Red

时向下滑动，并在从

Red

返回到

Blue

时向上滑动。

在

Blue

中，当您查看

Red

右侧时，您可以看到

Blue

被渲染。但要由您来修改它，因为如果用户不打算使用它，首先加载

Red

可能会浪费。

当然，只有单击

Blue

或

Red

内的链接才会发生转换。任何其他重定向方法都会立即显示

Blue

或

Red

祝你好运