您的当前位置:首页>全部文章>文章详情

微信小程序自定义顶部导航栏样式

发表于:2022-09-30 09:57:40浏览:140次TAG: #小程序 #微信开发 #自定义导航

navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子。
思路:隐藏原生样式,获取胶囊按钮、状态栏相关数据以供后续计算,根据不同机型计算出该机型的导航栏高度,进行适配
编写新的导航栏,引用到页面。
1、自定义导航栏
navigation-bar标签

<page-meta>
  <navigation-bar
    title="勾股OA"
    font-color="#fff"
    background-color="#4A87F7"
  />
</page-meta>

2、动态修改导航栏名称

wx.setNavigationBarTitle({
  title: '勾股OA'
})

3、隐藏原生的navigationBar,自定义导航,需要设置头部导航栏的页面中通过json配置 “navigationStyle”: “custom” ,自定义导航栏,只保留右上角的胶囊按钮。
index.json文件:

"windows":{
  "navigationStyle": "custom"
}

index.js文件:

Page({
  data: {
    statusBarHeight: 0,
    isBack: false
  },
  onLoad(ops) {
    wx.getSystemInfo({
      success: (result) => {
        this.setData({statusBarHeight: result.statusBarHeight})
      }
    })
    if(ops.isBack) {
      this.setData({isBack})
    }
  })
})

index.wxml文件:

 <view class="statusBarBox">
  <view  style="height:{{statusBarHeight + 44}}px;">
    <navigator class="back" open-type="navigateBack" wx:if="{{isback}}"></navigator>
    <navigator class="home" open-type="reLaunch" url="/pages/index/index" wx:else>
      <image class="image" mode="aspectFill" src=""></image>
    </navigator>
    <text class="title">勾股OA</text>
  </view>
</view>

注意一下:导航栏高度一般都是状态栏的高度+44