微信小程序设置自定义头部title居中

1,501 阅读1分钟

image.png

在.json中设置"navigationStyle":"custom"自定义

 <view class="bannerbj" style="background-image:url({{background}})">
    <view class="banner_title" style="padding-top:{{navTop}}px;">全国公司注册起名查询</view>
  </view>
      

.banner_title是上面标题的class

    //自定义导航栏标题
      getMenu() {
        let rect = wx.getMenuButtonBoundingClientRect()
        // 获取标题文字信息
        let query = wx.createSelectorQuery()
        query.select('.banner_title').boundingClientRect()
        query.exec((res) => {
          let textHeight = res[0].height
          let top = rect.top + rect.height / 2 - textHeight / 2
          this.setData({
            navTop: top
          })
        })
      },