如何做左上角返回拦截弹框?
定制左上角返回按钮一般有两个目的:
引导按钮:页面作为小程序启动后第一个页面时,左上角没有操作按钮,用户只能点击在右边胶囊更多回到首页(入口太深)。定制顶部可以引导用户很方便去其他页面。
拦截弹框:比如当用户点击返回时,弹出弹框,挽留用户。
效果:
点击查看没定制顶部录屏,发现没定制时,用户只能点击右边回到首页,考虑入口太深,故在左边做了个很奇怪的返回icon。点击可自己体验效果
点击查看有定制顶部录屏,虽然也是启动后第一个页面,但左上角有按钮返回首页,并当用户抽到红包后,返回会弹框挽留用户。点击可自己体验效果
开发顶部组件知识:
主要知识是组件开发、 wx.getMenuButtonBoundingClientRect()的使用。
代码下载说明:
由于在文章里贴代码导致文章比较乱,所以示例放在代码块里,大家可在开发工具输入链接直接获取,或直接在链接下载文件。
顶部组件代码块:
https://developers.weixin.qq.com/s/A3Ki7Bmi7V9Z。
或点击下载示例代码
备注:
代码里有对应注释,我也不确定大家能不能看懂?虽然是很小的组件,代码量也不多,但如果有超过5位同学留言有必要观看视频来熟悉自定义顶部组件的开发过程,我也可录个视频。
推荐阅读
亲测有效隐藏scroll-view滚动条方法
实现自定义等间隔的tab