当前位置：首页 > uni-app

uniapp后退

2026-03-26 15:05:03uni-app

uniapp后退的实现方法

在uniapp中实现页面后退功能，可以通过以下几种方式：

使用uni.navigateBack API

uni.navigateBack({
  delta: 1 // 返回的页面数，默认1
})

delta参数表示返回的页面层数，设置为1即返回上一页。如果需要返回多级页面，可以增大delta值。

监听导航栏返回按钮 在pages.json中配置navigationBar的返回按钮事件：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false
      }
    }
  ]
}

然后在页面中监听返回按钮点击事件：

onBackPress() {
  uni.navigateBack()
  return true // 阻止默认返回行为
}

自定义返回按钮 在页面template中添加自定义返回按钮：

<view class="back-btn" @click="handleBack">
  <text>返回</text>
</view>

在methods中定义handleBack方法：

methods: {
  handleBack() {
    uni.navigateBack()
  }
}

注意事项

在H5端，如果是从外部链接跳转过来的，navigateBack可能无效，需要使用history.back()
在微信小程序中，页面栈最多10层，超过后无法返回
安卓物理返回键默认会触发页面返回，可以通过onBackPress拦截

多端兼容方案

uniapp后退

// #ifdef H5
if (window.history.length <= 1) {
  uni.redirectTo({ url: '/' })
} else {
  uni.navigateBack()
}
// #endif
// #ifndef H5
uni.navigateBack()
// #endif

以上方法可以根据实际需求选择使用，uni.navigateBack是最常用的跨平台后退方案。

标签: uniapp