收藏
回答

如何自定义顶部导航栏背景透明同时标题居中?

本人也在社区,百度所搜了一下,也参考了一下,没看太懂,复制下来也是一直报错

回答关注问题邀请回答
收藏

5 个回答

  • 曹孟良
    曹孟良
    2021-11-09

    首先在你需要自定义导航栏的页面的json文件里加上这个:

      "navigationStyle": "custom"

    然后用这个函数来获取导航栏高度

    getHeight:function(){
        var that = this
          , sysinfo = wx.getSystemInfoSync()
          , statusHeight = sysinfo.statusBarHeight
          , windowWidth = wx.getSystemInfoSync().windowWidth
          , isiOS = sysinfo.system.indexOf('iOS') > -1
          //原生胶囊宽87pt,距离右侧7pt,共94pt=125px,back&home区域是65px,加上间隔10px,共计消耗200px,胶囊左边与标题框空10px
          //1pt=4/3 px
          //这里算出来和实际效果不太一样,减掉185px刚刚好,选择相信眼睛哈哈哈
          , titleWidth = windowWidth - 185
          , navHeight;
        if (!isiOS) {
          navHeight = 48;
        } else {
          navHeight = 44;
        }
        // 获取系统信息
        var systemInfo = wx.getSystemInfoSync();
        // 胶囊按钮位置信息
        var menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
        that.globalData.statusHeight = statusHeight 
        that.globalData.navHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
      },
    


    上面代码里面的statusHeight,就是手机状态栏的高度(时间那一栏),navHeight就是原生导航栏的高度,你定义两个view在页面顶部,一个高度为statusHeight,另一个高度为navHeight,然后在navHeight里面写你想要实现的导航栏效果。

    至于居中、透明这些问题,都可以自己写组件了,应该很好解决吧?


    2021-11-09
    有用 4
    回复 5
    • 严冬
      严冬
      2021-11-09
      这个样子。。。么
      2021-11-09
      回复
    • 曹孟良
      曹孟良
      2021-11-09回复严冬
      wxml里面这样写:
      2021-11-09
      回复
    • 曹孟良
      曹孟良
      2021-11-09
      页面的JS里面这样写:
      2021-11-09
      回复
    • 曹孟良
      曹孟良
      2021-11-09
      全局的app.js里面这样写:一个是加在onlaunch里面,getHeight函数写在外面
      2021-11-09
      回复
    • 曹孟良
      曹孟良
      2021-11-09
      楼中楼代码不能写太长,getHeight这个函数,你直接复制我在楼顶回复的那一长串
      2021-11-09
      回复
  • 栉风
    栉风
    2021-11-10

    https://developers.weixin.qq.com/s/ubZsFHmh71uR

    2021-11-10
    有用 1
    回复
  • 凌晨丶傍晚
    凌晨丶傍晚
    2021-11-09

    https://developers.weixin.qq.com/s/ZNGKeGmt7zuP

    2021-11-09
    有用 1
    回复
  • 养乐多💍
    养乐多💍
    2021-11-09

    我是这么写的

    2021-11-09
    有用
    回复
  • 微喵网络
    微喵网络
    2021-11-09

    把你现有的代码发出来看看

    2021-11-09
    有用
    回复 1
    • 严冬
      严冬
      2021-11-09
      2021-11-09
      回复
登录 后发表内容