uni-transition 顶部 滚动 淡出

uni-transition 是一个Vue.js的过渡库，可以用于在应用中添加炫酷的过渡效果。顶部滚动淡出是指当页面向下滚动时，顶部的内容会逐渐淡出消失。

要实现这个效果，我们可以通过uni-transition提供的fade-out过渡效果和滚动事件来实现。

首先，需要在组件的模板中设置一个顶部容器，例如：

<template>
  <div class="top-container" :class="{ 'fade-out': isFadeOut }">
    <!-- 顶部内容 -->
  </div>
</template>

然后，在组件的脚本中，需要设置isFadeOut变量来控制滚动淡出效果的开关，并监听滚动事件：

<script>
export default {
  data() {
    return {
      isFadeOut: false,  // 是否触发淡出效果
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 判断页面滚动高度是否超过一定阈值，来触发淡出效果
      this.isFadeOut = scrollTop > 100;
    },
  },
};
</script>

最后，在样式中定义.fade-out类的过渡效果：

<style scoped>
.top-container {
  transition: opacity 0.5s;  // 过渡效果设置为0.5秒淡入淡出
}
.fade-out {
  opacity: 0;  // 当isFadeOut为true时，将顶部容器的透明度设置为0，实现淡出效果
}
</style>

通过以上的步骤，当页面向下滚动超过100个像素时，顶部的内容就会逐渐淡出消失，从而实现了顶部滚动淡出的效果。使用uni-transition库，我们可以轻松地给Vue.js应用添加各种炫酷的过渡效果。