Page 1 of 2
【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Oct 21日 10:19
by Muzzzhi
Code: Select all
看到上面有小伙伴提出如何拦截navigationBar后退按钮的问题,目前智能小程序已经提供了方案。
警告:此操作同时会劫持系统手势滑动,开启拦截后,应当在必要的时候取消拦截。
环境要求
使用步骤
- 设置导航栏后退类型
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()
})
注意事项
- ty.setNavigationBarBack 仅对当前页面有效,切换页面后,如需自定义,请重新设置。
- 自定义行为操作完成后,应重置回系统默认行为,避免无法退出当前页面。
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
})
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Oct 28日 09:58
by TheThingX
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Oct 28日 16:25
by Muzzzhi
是的,自定义行为操作完成后,应重置回系统默认行为,避免无法退出当前页面要记住哦
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Oct 28日 18:56
by TheThingX
Muzzzhi 2022年 Oct 28日 16:25
是的,自定义行为操作完成后,应重置回系统默认行为,避免无法退出当前页面要记住哦
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Nov 3日 11:27
by 智能小程序开发者
这个功能我看微信小程序都没有这个呢,智能小程序居然开了这个有用的功能,优秀
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Nov 24日 11:25
by xww
在使用ray开发的面板小程序中,可以使用这个方法来拦截吗
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Nov 24日 16:57
by Muzzzhi
xww 2022年 Nov 24日 11:25
在使用ray开发的面板小程序中,可以使用这个方法来拦截吗
暂时没有,本周加一下。
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Nov 24日 18:06
by Muzzzhi
xww 2022年 Nov 24日 11:25
在使用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
})
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Nov 24日 18:43
by xww
Re: 【开发者问答】关于如何拦截 navigationBar 后退按钮的事件?
Posted: 2022年 Nov 25日 10:26
by Muzzzhi
不客气