uniapp slide-in-top 用法

uniApp 的 slide-in-top 功能是一个导航栏动画效果，通常用于从顶部滑入或滑出视图控制器。它可以帮助提升用户体验，给页面切换带来平滑的过渡感。以下是基本的使用步骤：

1. 首先，在需要应用此效果的页面组件上，设置 `navigationStyle` 属性为 `'slide-in-top'` 或 `'slide-in-bottom'`，这取决于你想要的效果是向上滑还是向下滑动。

<view class="page" navigationStyle="slide-in-top">
   <!-- 页面内容 -->
</view>

2. 如果你需要控制具体的动画速度，可以设置 `animationDuration` 属性，单位为毫秒，例如 `animationDuration="500"` 表示动画持续时间为半秒。

<view class="page" navigationStyle="slide-in-top" animationDuration="500">
   <!-- 页面内容 -->
</view>

3. 为了更好地管理动画状态，你可以配合 Vue 的生命周期钩子 `beforeRouteEnter` 和 `beforeRouteLeave` 使用，以便在路由进入和离开时启动或停止动画。

export default {
  beforeRouteEnter(to, from, next) {
    // 开始动画
    this.slideInTop();
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 停止动画
    this.slideOutTop();
    next();
  },
  methods: {
    slideInTop() {
      // 自定义动画逻辑
    },
    slideOutTop() {
      // 自定义动画逻辑
    }
  }
}