微信小程序 - 自定义头部导航栏开发

默认情况下,‌小程序的顶部导航栏由系统自动生成,‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而,‌如果需要实现更复杂的样式,‌如自定义图标、‌背景等,‌或者需要适配不同手机屏幕的高度和样式,‌就需要自定义顶部导航栏。‌

小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域,‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件,‌包含导航栏的样式和交互逻辑,‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌

如下图,不同手机品牌的顶部区域范围存在差异,这就需要通过提供的相关API获取相应参数,以便根据当前设备屏幕的高度和样式,完成自定义顶部导航栏。

一、app.json参数配置

自定义导航栏首页需要在app.json文件中配置navigationStyle为custom,这样系统默认自动生成的航行栏就消失了。代码如下:

javascript 复制代码
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

二、自定义导航栏组件

在小程序项目中新建components目录,用于存放自定义组件。在内部创建Header组件,并实现自定义导航栏的样式和交互功能。目录如下图:

首页在index.wxml编写自定义导航栏框架结构,在index.wxss中添加自定义导航栏的样式,index.js中实现导航栏中的交互功能。

index.wxml代码如下:

javascript 复制代码
<!--components/Header/index.wxml-->
<view class="header-wrap">
  <view class="header-fixed-wrap">
    <view class="nav-bar"></view>
    <view class="flex-box">
      <view class="left">
        <button type="default" class="btn-back">返回</button>
      </view>
      <view class="middle">
        <view class="title">标题</view>
      </view>
      <view class="right"></view>
    </view>
  </view>
</view>

css wx

javascript 复制代码
/* components/Header/index.wxss */
.header-wrap { width: 100%; }
.header-wrap .nav-bar{ width: 100%; }
.header-fixed-wrap{ 
    width: 100%; 
    background-color: #ffffff; 
    border-bottom: 1px solid #cccccc; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1000; 
}
.header-fixed-wrap .flex-box{ 
    width: 100%; 
    height: 80rpx; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
}
.header-fixed-wrap .left, .header-fixed-wrap .right{ flex: 2; }
.header-fixed-wrap .middle{ flex: 5; }
.header-fixed-wrap .left .btn-back{ 
    width: 80rpx; height: 60rpx; line-height: 60rpx; font-size: 28rpx; font-weight: normal; padding: 0; background: none; 
}
.header-fixed-wrap .middle .title{ 
    width: 80%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; 
}
相关推荐
Q_Q51100828539 分钟前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐42 分钟前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序
LB21121 小时前
苍穹外卖-购物车 前端修改(小程序主页与购物车模块显示不一致)
小程序
peachSoda71 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
ღ᭄ꦿ࿐Never say never꧂3 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
2501_9151063210 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
巨神峰SEO13 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰14 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐15 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐15 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis