更新记录

1.3.4（2026-07-01） 下载此版本

完善插件使用说明

1.3.3（2026-07-01） 下载此版本

完善插件使用说明

1.3.2（2026-06-25） 下载此版本

完善插件使用说明

平台兼容性

uni-app(3.7.13)

其他

mordom-ani-navigator

功能特性

• 可选是否自动改写原生 uni.navigateTo / uni.redirectTo / uni.navigateBack，让存量代码零改动即获得动画
• 添加了uni.aniNavigateTo、uni.aniRedirectTo、uni.aniNavigateBack三个方法，用于替代 H5 端的 uni.navigateTo、uni.redirectTo、uni.navigateBack，补充页面转场动画
• 支持 <ani-navigator> 组件调用方式
• 内置 6 种动画：slide-in-right、slide-in-left、slide-in-top、slide-in-bottom、fade-in、zoom-fade-in
• 支持为 redirect 单独配置默认动画
• 支持在单次调用时临时覆盖动画参数
• 仅在 H5 平台启用动画；非 H5 平台下 uni.ani* 方法会直接调用原生路由（不抛错）

安装

在 main.js 中注册插件：

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

app.use(AniNavigator, {
  animationName: 'slide-in-right',
  animationNameRedirect: 'fade-in',
  pageIn: 225,
  pageOut: 225,
  patchNativeRoutes: false,
})

全局配置

动画配置对象

调用 uni.ani* 方法或使用 <ani-navigator> 时，可通过 animation 字段临时覆盖动画参数：

动画配置优先级

1. 单次调用传入的 animation
2. animationNameRedirect（仅 openType === 'redirect' 时生效）
3. 全局默认值 animationName / pageIn / pageOut

使用模式：patchNativeRoutes 详解

patchNativeRoutes 决定插件如何接入你的项目，共有两种使用模式，按需选择其一。

• false（默认）：插件不会动原生方法，需要主动调用 uni.ani* 方法，或使用 <ani-navigator> 组件
• true：插件启动时把 uni.navigateTo / uni.redirectTo / uni.navigateBack 三个全局方法重写为带动画版本，已经写好的 uni.navigateTo(...) 等调用无需修改，自动拥有转场动画
• 仅在 H5 平台生效；非 H5 平台下原生方法不会被改写
• 开启后如需在某些场景下不使用动画（例如埋点上报后立即跳转），可以临时调用 uni.reLaunch / uni.switchTab 这类未被改写的方法，或在调用前把 animation 留空并使用 uni.aniReLaunch / uni.aniSwitchTab

模式一：全局开启，存量代码零改动

// apps/mobile/src/main.js
app.use(AniNavigator, {
  animationName: 'slide-in-right',
  animationNameRedirect: 'fade-in',
  pageIn: 225,
  pageOut: 225,
  patchNativeRoutes: true,
})

<!-- 业务页面无需任何修改，原本的 uni.navigateTo 自动带动画 -->
<template>
  <view @click="goDetail">跳转详情</view>
</template>

<script setup>
const goDetail = () => {
  uni.navigateTo({ url: '/pages/detail/detail' })
}
</script>

模式二：精细控制，仅在需要处使用动画

// apps/mobile/src/main.js
app.use(AniNavigator, {
  animationName: 'slide-in-right',
  animationNameRedirect: 'fade-in',
  pageIn: 225,
  pageOut: 225,
  patchNativeRoutes: false, // 保持默认
})

// 业务代码按需调用带动画版本
uni.aniNavigateTo({ url: '/pages/detail/detail' })

// 临时切换动画
uni.aniNavigateTo({
  url: '/pages/detail/detail',
  animation: { animationName: 'fade-in', pageIn: 300, pageOut: 200 },
})

用法一：全局方法

uni.ani* 方法在所有平台都可用，H5 下走动画通道，其他平台直接调用原生路由。

// 前进
uni.aniNavigateTo({ url: '/pages/index/index' })

// 重定向（使用 animationNameRedirect 配的默认动画）
uni.aniRedirectTo({ url: '/pages/index/index' })

// 后退
uni.aniNavigateBack()

// 后退多级
uni.aniNavigateBack({ delta: 2 })

// 临时覆盖动画
uni.aniNavigateTo({
  url: '/pages/detail/detail',
  animation: {
    animationName: 'fade-in',
    pageIn: 300,
    pageOut: 200,
  },
})

uni.aniNavigateBack({
  delta: 2,
  animation: {
    animationName: 'slide-in-left',
    pageIn: 300,
    pageOut: 200,
  },
})

// reLaunch / switchTab 不带动画通道，但仍走动画 hook 做状态重置
uni.aniReLaunch({ url: '/pages/index/index' })
uni.aniSwitchTab({ url: '/pages/tabbar/home' })

用法二：组件 <ani-navigator>

Props

示例

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

<ani-navigator
  url="/pages/detail/detail"
  open-type="navigate"
  :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>

<ani-navigator
  url="/pages/tabbar/home"
  open-type="switchTab"
>
  <button>切换到首页 Tab</button>
</ani-navigator>

注意事项

• 如果使用 uni-app 默认导航栏，点击系统返回不会触发动画，因为插件无法拦截 uni-app 内部的返回逻辑
• 如需返回动画，建议使用自定义导航栏，并在返回按钮中调用 uni.aniNavigateBack()
• patchNativeRoutes 为 false 时，原生 uni.navigateTo / uni.redirectTo / uni.navigateBack 不会带动画；需要动画时请改用 uni.ani* 方法或 <ani-navigator> 组件
• patchNativeRoutes 为 true 时，原生 uni.navigateTo / uni.redirectTo / uni.navigateBack 已被改写为带动画版本；该改写无法还原，请在确定要全局启用动画的项目中开启