对于微信小程序自定义导航栏兼容适配所有机型感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解小程序自定义导航栏适配(完美版)，并且为您提供关于uniapp中小程序自定义导航栏、uniapp开发

对于微信小程序自定义导航栏兼容适配所有机型感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解小程序自定义导航栏适配(完美版)，并且为您提供关于uniapp中小程序自定义导航栏、uniapp开发微信小程序自定义顶部导航栏功能实例、uniapp微信小程序自定义导航栏的全过程、【小程序】微信小程序自定义导航栏及其封装的宝贵知识。

• 微信小程序自定义导航栏兼容适配所有机型（小程序自定义导航栏适配(完美版)）
• uniapp中小程序自定义导航栏
• uniapp开发微信小程序自定义顶部导航栏功能实例
• uniapp微信小程序自定义导航栏的全过程
• 【小程序】微信小程序自定义导航栏及其封装

微信小程序自定义导航栏兼容适配所有机型（小程序自定义导航栏适配(完美版)）

目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。

这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以

全局配置

//app.json
window: {
 navigationStyle: custom
}

单页面配置

//page.json
{
 navigationStyle: custom
}

效果对比

能明显的看出来，自定义导航栏页面内容已经顶到屏幕顶端，除了胶囊按钮，其他都是页面可控区域。每个手机的屏幕都不一样，各家系统的状态栏高度也不一样，因此，我们在开发页面时要考虑屏幕的适配，有刘海的，要留出刘海的距离，没有的，要把状态栏高度留出来。

1.获取导航栏高度及按钮位置

微信提供了获取导航栏高度的Api和胶囊按钮位置的Api

// 系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

在控制台打印出这两个Api返回结果

这里面我们只说几个我们接下来用到的参数。

statusBarHeight     // 状态栏高度
screenWidth         // 胶囊的宽度

top                 // 胶囊到顶部距离
height              // 胶囊的高度
right               // 胶囊距离右边的距离

通过这几个参数，我们可以计算出状态栏的高度，微信胶囊所占的高度（存在padding值，可以使元素和胶囊纵向居中）

首先在app.js中定义全局data-globalData

globalData: {
    navBarHeight: 0,     // 导航栏高度
    menuBotton: 0,       // 胶囊距底部间距（保持底部间距一致）
    menuRight: 0,        // 胶囊距右方间距（方保持左、右间距一致）
    menuHeight: 0,       // 胶囊高度（自定义内容可与胶囊高度保证一致）
},

新建个方法

setNavBarInfo() {
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    this.globalData.menuHeight = menuButtonInfo.right;
 }

在onLaunch中调用，因为我这个项目是所有的导航都不用微信自带的，所以在app.js

中调用及设置data。

 onLaunch() {
    this.setNavBarInfo()
 },

到这里所需要用到的都已经存了起来，页面用法也比较简单，排除状态栏的高度，设置导航栏的高度和胶囊高度保持，用flex布局。

2.页面适配

首先page.js中定义变量

var app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight, //导航栏高度
    menuBotton: app.globalData.menuBotton, //导航栏距离顶部距离
    menuRight: app.globalData.menuRight, //导航栏距离右侧距离
    menuHeight: app.globalData.menuHeight, //导航栏高度
  }
})

页面使用

<view class=nav style=height:{{navBarHeight}}px;>
 <view class=nav-main>
 <!-- 胶囊区域 -->
 <view 
  class=capsule-Box  style=style=height:{{menuHeight+menuBotton*2}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:0px;padding:0 {{menuRight}}px;>
 <!-- 导航内容区域 -->
  <slot></slot>
 </view>
 </view>
</view>

复制

wxss

/* 公共导航 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  Box-sizing: border-Box;
  width: 100vw;
  z-index: 1000;
 }
 .nav-main {
  width: 100%;
  height: 100%;
  Box-sizing: border-Box;
  position: relative;
 }
 .nav .capsule-Box {
  position: absolute;
  Box-sizing: border-Box;
  width: 100%;
  display: flex;
  align-items: center;
 }

最终效果

此种适配方案适应所有手机，应该说是最优的选择。

uniapp中小程序自定义导航栏

1、如果需要使用自定义导航栏的时候，需要在page.json文件中做如下更改

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/list/index",
            "style": {
                "navigationBarTitleText": "list",
                "navigationStyle":"custom"//添加自定义配置
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "home"
            }
        }
    ],

2、配置完成之后，自定义导航有如下写法

1）固定的状态栏高度，此时iphonex等手机不建议使用

<template>
    <view>
        <view>
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background: red;
    }
</style>

2)自定义写法，根据对应机型自行调整，所有机型都可使用

<template>
    <view>
        <!-- 假设我需要状态栏到文字内容部分还有50px的距离 -->
        <view:>
            <text>list</text>
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>  

<script>
    export default{
        data(){
            return {
                height:null,//获取的状态栏高度
            }
        },
        onLoad(){
            var _this=this;
            // 获取手机状态栏高度
            uni.getSystemInfo({
                success:function(data){
                    // 将其赋值给this
                    _this.height=data.statusBarHeight;
                }
            })
        },
    }
</script>

<style>
    .status_bar {
        width: 100%;
        background: #007AFF;
        position: relative;
    }
    /* 调整状态栏标题的位置 */
    text{
        position: absolute;
        margin: auto;
        bottom:10px;
        left:0;
        right:0;
        text-align: center;
    }
</style>

uniapp开发微信小程序自定义顶部导航栏功能实例

自定义导航栏渐变色，先上效果

使用uniapp开发小程序，在不同界面，要去对页面进行修改顶部导航栏。

比如说要去定义导航栏的背景颜色，常规的去定义导航栏背景颜色

全局定义导航栏

"window": {
   "navigationBarBackgroundColor": "#32A2FD",  // 顶部背景颜色
    "navigationBarTitleText": "123456",         // 顶部文字
    "navigationStyle": "default",               // 是否自定义导航栏,当"default"为"custom"时开启自定义头部导航栏选项
    "navigationBarTextStyle": "white",          // 顶部文字颜色 仅支持 white/black    
},

单页面定义导航栏

"path": "pages/cargo/pickUpGoods",//页面路径
"style": {
	"navigationBarTitleText": "uni-app", // 顶部文字
	"navigationBarBackgroundColor": "#fff", // 顶部背景颜色
	"navigationBarTextStyle": "black" // 顶部文字颜色
 
}

重点来了，导航栏设置渐变色

踩坑，开始我以为把顶部导航栏的颜色换成渐变的就可以了，但是不行

查了之后才知道，设置渐变色要去自定义背景颜色

首先  如果是全部页面就在window里面添加，如果是单页面就在页面添加

"navigationStyle": "custom"

"path": "pages/cargo/shipments",
"style": {
	"navigationBarTitleText": "uni-app",
	"navigationStyle": "custom",//设置自定义导航栏
}

然后，自己封装一个组件，

<template>
	<view>
		<view:>
			<!-- 左侧返回按钮 -->
			<view@click="onBack" v-if="back" :>
				<uni-icons type="arrowleft" size="30" :color=''color''></uni-icons>
				<!-- 此处图标使用的是 uni-ui图标 -->
			</view>
			<!-- 中间标题文字 -->
			<view>
				{{title}}
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				height: 0, 
				paddingTop: 0,
				
			}
		},
		// props: ["title", "back"],
		props:{
			title:{ // 标题文字(默认为空)
				type:String,
				default:''''
			},
			color:{ // 标题和返回按钮颜色(默认白色)
				type:String,
				default:''#fff''
			},
            //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background:{ // 背景颜色(不传值默认透明)
				type:String,
				default:''transparent''
			},
			back:{ // 是否显示返回按钮(不传值默认不显示)
				type:Boolean,
				default:false
			},
		},
		
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + "px"
			this.paddingTop = demo.top + "px"
 
		},
		methods: {
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack")
			}
		}
	}
</script>
<style lang="less">
	.demo {
		position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
		// position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;
 
		.left {
			float: left;
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			top: 0;
			bottom: 0;
			left: 20rpx;
			color: #fff;
			margin: auto;
		}
 
		.title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			// color: #FFFFFF;
		}
	}
</style>

然后，引入你的这个组件，写在页面的最上面

 代码在这里

<navbar:background="backgroundColor" back :title="title" @onBack="goBack"></navbar>

引入组件，使用

补充：更换图标

1.在阿里巴巴矢量图选择自己喜欢的图标，然后点击收藏

2.右上角下载全部已经收藏了的图标

3.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码

4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\u***"，然后重启就实现了

5.最后在对应的页面生命周期方法里填写，通过e.index，来配置不同的方法

        onNavigationBarButtonTap:function(e){
            console.log(JSON.stringify(e))
        },

踩了很多坑，制作不易。

总结

到此这篇关于uniapp开发微信小程序自定义顶部导航栏的文章就介绍到这了,更多相关uniapp自定义顶部导航栏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

uniapp微信小程序自定义导航栏的全过程

前言

相信很多小伙伴在使用uniapp进行多端开发的时候呢，在面对一些奇葩的业务需求的时候，uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了，这个时候就需要我们自己自定义导航栏使用啦。

当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用，今天也给大家分享一个我自己写的导航栏啦，希望大家多多指点

首先我们在自定义导航栏的时候，我们需要知道头部的导航栏有哪几部分组成，那么我们以微信小程序为例

可以看到在微信小程序中，我们的头部导航栏其实受到右上角胶囊的限制比较大，这个时候我们自定义的导航栏，需要做到标题于胶囊水平对齐，那其实这个时候整个头部其实主要又：状态栏的高度+标题栏的高度组成。

状态栏的高度我们可以通过uni.getSystemInfoSync().statusBarHeight来获取。

那么标题栏的高度我们怎么获取呢？

其实要想定义标题栏的高度，我们需要知道这个胶囊的位置，在小程序中我们可以使用wx.getMenuButtonBoundingClientRect()获取关于胶囊的信息

获取到的胶囊的top，left，right分别对应胶囊的上边界，左边界，右边界相对于屏幕左上角的起点的位置，所以我们是不是可以用（胶囊上边界距离顶部的距离 - 状态栏的高度）*2+胶囊的高度，就是标题栏的高度呢？然后再在标题栏里面添加一个文本区让他的高度等于胶囊的高度，实现flex布局的上下居中是不是就搞定了呢？

以上呢其实针对小程序平台的导航栏讲解，那么既然使用uniapp，就会考虑到多端情况

那么其实我们使用uniapp获取到的状态栏在h5，小程序和app原生都是有效的，h5网页中一般我们都是直接采用浏览器内核给我们内置的网页导航栏，就是一个头部，没有过多的要求，而且浏览器不同，给我们提供的头部导航也不一样。

而对于app端，我们没有了像微信小程序中那种让人心烦的胶囊之后，我们只需要知道状态栏的高度，然后加上自己业务需求的标题栏样式和标题栏高度就行啦

所以我们在进行自定义导航栏封装的时候就要对代码进行条件编译啦。那么我这里呢是把微信小程序做了单独的处理，微信小程序之外的平台看作是统一状态

献上源码：

首先我们把获取设备信息的代码封装到一个统一的js文件里面，这样方便我们在组件中获取也方便我们在页面中获取。