评论

如何做左上角返回拦截弹框?

顶部导航栏组件的定制开发

定制左上角返回按钮一般有两个目的:

  1. 引导按钮:页面作为小程序启动后第一个页面时,左上角没有操作按钮,用户只能点击在右边胶囊更多回到首页(入口太深)。定制顶部可以引导用户很方便去其他页面。
  2. 拦截弹框:比如当用户点击返回时,弹出弹框,挽留用户。

效果:

  1. 点击查看没定制顶部录屏,发现没定制时,用户只能点击右边回到首页,考虑入口太深,故在左边做了个很奇怪的返回icon。点击可自己体验效果

  2. 点击查看有定制顶部录屏,虽然也是启动后第一个页面,但左上角有按钮返回首页,并当用户抽到红包后,返回会弹框挽留用户。点击可自己体验效果

开发顶部组件知识:
主要知识是组件开发、 wx.getMenuButtonBoundingClientRect()的使用。

代码下载说明:
由于在文章里贴代码导致文章比较乱,所以示例放在代码块里,大家可在开发工具输入链接直接获取,或直接在链接下载文件。

顶部组件代码块:
https://developers.weixin.qq.com/s/A3Ki7Bmi7V9Z。
或点击下载示例代码

备注:
代码里有对应注释,我也不确定大家能不能看懂?虽然是很小的组件,代码量也不多,但如果有超过5位同学留言有必要观看视频来熟悉自定义顶部组件的开发过程,我也可录个视频。

推荐阅读

  1. 亲测有效隐藏scroll-view滚动条方法
  2. 实现自定义等间隔的tab
最后一次编辑于  07-04  
点赞 3
收藏
评论

3 个评论

  • 丁令俊_
    丁令俊_
    07-11

    这个只是重写头部

    好像然并卵

    07-11
    赞同
    回复 1
    • ᴴᴱᴸᴸᴼ
      ᴴᴱᴸᴸᴼ
      07-30
      重写头部就可以实现了吧,自定义下按钮点击事件
      07-30
      回复
  • 回凉
    回凉
    07-09

    这个只能阻止用户点击左上角的返回键吧,禁止页面右滑手势返回可以通过disableSwipeBack来设定,那安卓机底部的返回按键怎么阻止呢?

    07-09
    赞同
    回复 4
    • 李伟豪
      李伟豪
      07-09

      对,只能阻止左上角按钮,小程序无法阻止物理按键返回。

      07-09
      回复
    • 回凉
      回凉
      07-09回复李伟豪

      但是我在滴滴小程序的设置紧急联系人页面发现他们做到了,你点击底部返回的时候会有提示你手机号有误啥的

      07-09
      回复
    • 李伟豪
      李伟豪
      07-09回复回凉

      紧急联系人页面是小程序嵌套h5,h5可以做到阻止物理按键返回。

      07-09
      回复
    • 回凉
      回凉
      07-09回复李伟豪

      原来是这样,学习了

      07-09
      回复
  • I-S
    I-S
    07-08

    wx.getMenuButtonBoundingClientRect()在至少iphone5上不太准确。希望微信平台更正一下

    07-08
    赞同
    回复