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

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

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

如下图,不同手机品牌的顶部区域范围存在差异,这就需要通过提供的相关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; 
}
相关推荐
知识分享小能手14 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
Strawberry9618 分钟前
chooseVideo传视频无法取到缩略图
微信小程序
一匹电信狗1 小时前
【C++】手搓AVL树
服务器·c++·算法·leetcode·小程序·stl·visual studio
2501_916008891 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张4 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_916008894 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos
2501_915918414 小时前
App 使用 HTTPS 的工程化实战,从接入到真机排查的一线指南
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆7 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
江城开朗的豌豆7 小时前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
说私域8 小时前
开源AI大模型AI智能名片S2B2C商城小程序在护肤品文案痛点表达中的应用与效果研究
人工智能·小程序