vue自定义大屏内容从上往下滚动

在Vue中创建一个从上往下滚动的大屏内容，可以使用<transition-group>元素配合CSS动画。以下是一个简单的例子：

<template>
  <div class="scrolling-container">
    <transition-group name="slide-up" tag="div">
      <div v-for="(item, index) in items" :key="index" class="scrolling-item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  }
};
</script>
 
<style scoped>
.scrolling-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.scrolling-item {
  position: absolute;
  width: 100%;
  transition: transform 0.5s;
}
 
.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 0.5s;
}
 
.slide-up-enter-from, .slide-up-leave-to {
  transform: translateY(100%);
}
 
.slide-up-enter-active {
  transition-delay: 0.5s;
}
</style>

在这个例子中，items数组中的每个元素都会通过v-for渲染为一个新的div。<transition-group>元素会自动处理进入和移除元素时的动画。CSS中定义了.slide-up-enter-active和相关类来实现从下往上滚动的效果。每个元素在进入视图时会有0.5秒的延迟，以达到连续滚动的效果。