评论

【类知乎小房子】自定义返回键 自定义标题 自定义主页按钮

【类知乎小房子】自定义返回键 自定义标题 自定义主页按钮

自定义顶部标题和左上角按钮方法解析及实践

前言

之前有兄台发过设置custom的方法 但是没有具体的实现方法 以至于很多不了解小程序的开发者不能循序渐进的理解制作自定义标题的方法
在这里详细总结了计算各参数的方法 我也写了一个自定义标题组件 只需要引用 直接在页面中调用即可 但因为掺杂了业务代码 需要整理过后会放出来

具体方法

首先在app.json中 将window.navigateionStyle 设置为custom

使用 wx.getSystemInfoSync 获取系统的属性 其中有顶部状态栏的高度
使用 wx.getMenuButtonBoundingClientRect 获取右上角胶囊菜单的相关属性 包括胶囊菜单的高度、相距上下左右屏幕的绝对位置

如上图 我们需要获取四个参数 来确定整个标题栏的各项参数和左侧自定义胶囊的位置
获取顶部状态栏高度sys.statusBarHeight

具体代码

var sys= wx.getSystemInfoSync() 
var menu = wx.getMenuButtonBoundingClientRect() 

var statusHeight = menu.statusBarHeight
var titleHeight = menu.height
var titleRowWidth = sys.right - menu.right
var titleColumnHeight = menu.top - menu.statusBarHeight

注意

小程序原生组件会遮挡自定义头部组件 如 canvas组件 input textarea的提示信息placeholder
该问题可以使用cover-view将头部定义为原生组件 设置层级解决

最后一次编辑于  07-31  (未经腾讯允许,不得转载)
点赞 4
收藏
评论

3 个评论

  • 騁爲
    騁爲
    08-17

    目前也是采用 statusBarHeight + 胶囊按钮位置 来自定义导航栏,现在有个难点是如何能够获取到在 app.json 中定义的页面标题并设置到自定义的导航栏上,如果要手动一个一个修改,工作量有点大了

    08-17
    赞同
    回复 2
    • 张有釜
      张有釜
      08-17
      如果页面名称是固定不变的 可以写一个全局的映射表 如果是动态的 可以写一个全局的方法 在需要的情况下调用 还要看具体的情况
      08-17
      回复
    • 騁爲
      騁爲
      08-19回复张有釜
      部分页面是固定的,部分页面需要动态设置,现在的做法是提供一个全局的方法,只能一个一个页面去设置标题了(本来是想着直接从page对象找出这个标题,但是把page打印出来,找遍了属性都找不到哪里会携带这个标题)
      08-19
      回复
  • Jinker🔅🔅
    Jinker🔅🔅
    08-05

    感谢分享

    08-05
    赞同
    回复
  • 惠嘉伟-Javey
    惠嘉伟-Javey
    07-31

    感谢分享

    07-31
    赞同
    回复