【开发者问答】关于如何拦截 navigationBar 后退按钮的事件？

[Muzzzhi]

Code: Select all

看到上面有小伙伴提出如何拦截navigationBar后退按钮的问题，目前智能小程序已经提供了方案。

警告：此操作同时会劫持系统手势滑动，开启拦截后，应当在必要的时候取消拦截。

环境要求

Code: Select all

1. 基础库 >= 2.6.1
2. 容器版本 >=2.3.0

使用步骤

1. 设置导航栏后退类型

API:

Code: Select all

ty.setNavigationBarBack({type: 'system' | 'custom'})

Code: Select all

ty.setNavigationBarBack({
-  type: 'system'  // 系统默认行为
+  type: 'custom'  // 自定义行为
});

2. 监听后退事件

该只有在启动自定义行为后才会触发

Code: Select all

ty.onNavigationBarBack(function () {
  console.warn('navigation-bar onNavigationBarBack');
  // ... 一些列操作
  // 响应完成后设置会系统默认行为
  ty.setNavigationBarBack({type: 'system'});
  // 页面后退
  ty.navigateBack()
})

注意事项

1. ty.setNavigationBarBack 仅对当前页面有效，切换页面后，如需自定义，请重新设置。
2. 自定义行为操作完成后，应重置回系统默认行为，避免无法退出当前页面。

---

ray中使用

@ray-js/ray 升级到 0.6.21，已经提供~

Code: Select all

// 类型定义
export function onNavigationBarBack(callback: (res: any) => void)

interface setNavigationBarBackParam {
  type: 'system' | 'custom'
}
export function setNavigationBarBack(param: setNavigationBarBackParam)


// 使用
import { setNavigationBarBack, onNavigationBarBack } from '@ray-js/ray'

setNavigationBarBack({type: 'custom'})

onNavigationBarBack(()=>{
	// do sth
})

[TheThingX]

侧滑手势返回上页，也可拦截？

[Muzzzhi]

侧滑手势返回上页，也可拦截？

是的，自定义行为操作完成后，应重置回系统默认行为，避免无法退出当前页面要记住哦

[TheThingX]

侧滑手势返回上页，也可拦截？

是的，自定义行为操作完成后，应重置回系统默认行为，避免无法退出当前页面要记住哦

[智能小程序开发者]

这个功能我看微信小程序都没有这个呢，智能小程序居然开了这个有用的功能，优秀

[xww]

在使用ray开发的面板小程序中，可以使用这个方法来拦截吗

[Muzzzhi]

在使用ray开发的面板小程序中，可以使用这个方法来拦截吗

暂时没有，本周加一下。

[Muzzzhi]

在使用ray开发的面板小程序中，可以使用这个方法来拦截吗

@ray-js/ray 升级到 0.6.21以上，已经提供~

Code: Select all

// 类型定义
export function onNavigationBarBack(callback: (res: any) => void)

interface setNavigationBarBackParam {
  type: 'system' | 'custom'
}
export function setNavigationBarBack(param: setNavigationBarBackParam)


// 使用
import { setNavigationBarBack, onNavigationBarBack } from '@ray-js/ray'

setNavigationBarBack({ type: 'custom' })

onNavigationBarBack(()=>{
	// do sth
})

[xww]

好的，拦截成功，非常感谢！

[Muzzzhi]

好的，拦截成功，非常感谢！

不客气