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

Ya_Wen

已于 2022-04-11 17:14:45 修改

阅读量6.1k

点赞数 1

分类专栏：小程序文章标签：前端微信小程序

于 2021-07-02 17:22:49 首次发布

本文链接：https://blog.csdn.net/gl0ry/article/details/118419435

版权

本文介绍了如何在微信小程序中实现自定义的沉浸式导航栏。首先需要在页面或app.json配置navigationStyle为custom，然后创建并编写navigationBar组件的wxml、wxss、js和json文件。在目标页面引用组件，并进行相应的页面配置，以实现导航栏的自定义效果。同时，文章提及了处理胶囊按钮信息报错和获取问题的兼容方法。

摘要由CSDN通过智能技术生成

沉浸式导航头
在这里插入图片描述

要用自定义的导航栏首先需要将页面设置成沉浸式导航，在该页面的json文件中配置navigationStyle，如果是所有页面都需要沉浸式，则在app.json中设置

{
  "navigationBarTitleText": "测试",
  "navigationStyle": "custom"  // 沉浸式导航头
}

创建组件目录
在这里插入图片描述
navigationBar.wxml文件：

<view class='nav-wrap' style='top: {
  {top}}rpx; height: {
  {height}}rpx; line-height: {
  {height}}rpx'>  //top是右侧胶囊菜单距离手机顶部的距离 height是胶囊菜单的高度，可以设置导航与胶囊菜单同高
  <view class='nav-title' style='width: {
  {left - 36}}rpx'>  // left是除去胶囊菜单所剩的宽度，36是图上返回图标的宽度，可自行修改
    <image class='nav-title-back' src="../../image/back.png"