小程序自定义头部导航

最新推荐文章于 2024-09-29 18:25:44 发布

原创

最新推荐文章于 2024-09-29 18:25:44 发布 · 828 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #小程序

本文介绍了如何在小程序中自定义头部导航，特别是在tabbar页面添加返回按钮的需求。通过修改.json配置文件设置`navigationStyle: custom`，然后在.wxml和.wxss文件中添加自定义代码，以及在.js中获取系统状态栏高度和胶囊按钮位置信息，实现自定义导航栏与胶囊按钮对齐。

首先效果图奉上，右边的胶囊按钮是自带的，我们自定义的是左边的内容

（一般情况下我们是不需要自定义头部导航的，我这个是有需求是在tabbar页面要有返回的按钮，但是tabbar页面默认是没有返回的，所以这里我们自定义一下）

第一步：.json 文件，添加 "navigationStyle": "custom" ，告诉页面，这里导航要自定义了，如果不写这一步的话，下面的写了也出不来

 "navigationStyle": "custom"

第二步： .wxml 文件，添加我们需要自定义的 wxml 代码

<!-- 自定义头部导航 -->
<view class="custom_nav" style="height:{
  
  {navbarHeight}}rpx;">
  <view class="custom_nav_box" style="height:{
  
  {navbarHeight}}rpx;">
    <view class="custom_nav_bar" style="top:{
  
  {statusBarHeight}}px">
      <view class="custo