更新记录

1.0.3（2026-05-20） 下载此版本

完善标题

1.0.2（2026-05-20） 下载此版本

完善文档

1.0.1（2026-05-20） 下载此版本

更新文档

平台兼容性

uni-app(3.7.7)

其他

mordom-ani-navigator

功能特性

• 本插件可以用于替代uni.redirectTo、uni.navigateTo、uni.navigateBack方法，使用方式与uni的API完全一致，并且增加了进入、退出动画的效果
• 该组件支持 <ani-navigator> 组件调用方式，可以用于替代navigator组件。
• 6 种预设动画：slide-in-right、slide-in-left、slide-in-top、slide-in-bottom、fade-in、zoom-fade-in
• 支持为navigateTo和redirectTo独立配置跳转的默认动画
• 支持调用时传入临时指定动画效果
• 仅支持 H5 平台

安装

在 main.js 中引入插件：

import AniNavigator from '@/uni_modules/mordom-ani-navigator'

app.use(AniNavigator, {
  animationName: 'slide-in-right', // 动画名称：slide-in-right, slide-in-left, slide-in-top, slide-in-bottom, fade-in, zoom-fade-in
  animationNameRedirect: 'fade-in', // redirect 跳转时的默认动画（可选）
  pageIn: 225, // 页面进入动画时长（毫秒）
  pageOut: 225, // 页面离开动画时长（毫秒）
})

全局配置选项

使用方式

注意事项

⚠️ 如果使用 uni-app 默认导航栏，点击后退按钮不会触发动画，因为插件无法拦截 uni-app 内部的前进/后退逻辑。如需实现带动画的返回效果，建议使用自定义导航栏，在返回按钮中调用 uni.aniNavigateBack() 处理后退。

⚠️ 本插件不会更改原生 uni.navigateTo、uni.redirectTo 的动画行为。如需使用转场动画，必须调用插件提供的 uni.aniNavigateTo()、uni.aniRedirectTo()、uni.aniNavigateBack() 方法，或是使用ani-navigator组件替代原生的navigator组件。

方式一：全局方法

• 在使用全局方法时，你可以传入与原生 uni.navigateTo、uni.redirectTo、uni.navigateBack 相同的参数，有需要的话，可以增加 animation 属性，用于配置动画。
• 除了navigateTo、redirectTo、navigateBack，其他几个跳转方法（reLaunch、switchTab等）均不支持动画

// 跳转到指定页面（带动画）
uni.aniNavigateTo({ url: '/pages/index/index' })

// 重定向到指定页面
uni.aniRedirectTo({ url: '/pages/index/index' })

// 返回上一页（带动画）
uni.aniNavigateBack()

// 跳转时临时指定动画配置
uni.aniNavigateTo({
  url: '/pages/detail/detail',
  animation: {
    animationName: 'fade-in',
    pageIn: 300,
    pageOut: 200
  }
})

// 重定向时临时指定动画配置
uni.aniRedirectTo({
  url: '/pages/login/login',
  animation: {
    animationName: 'fade-in',
    pageIn: 300,
    pageOut: 200
  }
})

// 返回时临时指定动画配置
uni.aniNavigateBack({
  delta: 2,
  animation: {
    animationName: 'slide-in-left',
    pageIn: 300,
    pageOut: 200
  }
})

方式二：通过组件调用

• 组件设计尽量借鉴了原生的navigator组件，除了animation选项是我新增的，其他选项都可以直接使用

组件属性

组件使用示例

<ani-navigator url="/pages/index/index" open-type="navigate">
  <button>跳转到首页</button>
</ani-navigator>

<ani-navigator url="/pages/index/index" open-type="navigate" :animation="{ animationName: 'fade-in', pageIn: 300, pageOut: 200 }">
  <button>带自定义动画跳转</button>
</ani-navigator>

<ani-navigator url="/pages/login/login" open-type="redirect">
  <button>重定向到登录页</button>
</ani-navigator>

<ani-navigator url="/pages/login/login" open-type="redirect" :animation="{ animationName: 'fade-in', pageIn: 300, pageOut: 200 }">
  <button>带自定义动画重定向</button>
</ani-navigator>

<ani-navigator url="/pages/login/login" open-type="navigateBack" :delta="1" :animation="{ animationName: 'slide-in-left' }">
  <button>带自定义动画返回</button>
</ani-navigator>

动画配置优先级（从高到低）

1. 调用时 animation 选项 — 最高优先级，所有跳转方式（navigate/redirect/navigateBack）均支持临时覆盖 animationName、pageIn、pageOut
2. animationNameRedirect — 仅 redirect 跳转时的默认动画名（仅覆盖 animationName）
3. animationName / pageIn / pageOut — 全局默认值