微信小程序顶部导航栏样式设置（自定义）

效果：

 一、要用自定义的导航栏需要在app.json中配置（必须）

取消自带的导航栏："navigationStyle": "custom"

目前微信小程序不支持单个页面设置，一旦在要决定使用自定义导航栏，那么每个页面都需要设置，为了方便我就将其写成了一个组件：

二、目录结构

 

1、navbar.wxml文件：

<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>

<view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>

<view style='display: flex; justify-content: space-around;flex-direction: column'>

<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>

<view bindtap='_navback' wx:if='{{!share}}'>

<view class="iconfont icon-fanhui"></view>

<!-- <image src='/imgs/back-pre.png' mode='aspectFill' class='back-pre'></image> -->

</view>

<view class='navbar-v-line' wx:if='{{!share}}'></view>

<view bindtap='_backhome'>

<!-- <image src='/imgs/back-home.png' mode='aspectFill' class='back-home'></image> -->

<view class="iconfont icon-fanhui"></view>

</view>

</view>

</view>

</view>

2、 navbar.wxss文件：

/* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */

@import "../../Iconfont/iconfont.wxss";

 

.nav-wrap {

position: fixed;

width: 100%;

top: 0;

background: #fff;

color: #000;

z-index: 9999999;

}

/* 标题要居中 */

.nav-title {

position: absolute;

text-align: center;

max-width: 400rpx;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

font-size: 36rpx;

color: #2c2b2b;

font-weight: 600;

}

.nav-capsule {

display: flex;

align-items: center;

margin-left: 30rpx;

width: 140rpx;

justify-content: space-between;

height: 100%;

}

.navbar-v-line {

width: 1px;

height: 32rpx;

background-color: #e5e5e5;

}

.back-pre, .back-home {

width: 32rpx;

height: 36rpx;

margin-top: 4rpx;

padding: 10rpx;

}

.nav-capsule .back-home {

width: 36rpx;

height: 40rpx;

margin-top: 3rpx;

}

3、navbar.json文件：

{

"usingComponents": {

"navbar": "../components/navbar/navbar"

}

}

4、navbar.js文件：

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

// 组件所需的参数

nvabarData: {

showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示

title: '我的主页', //导航栏 中间的标题

},

// 此页面 页面内容距最顶部的距离

height: app.globalData.height * 2 + 20,

},

onLoad() {

console.log(this.data.height)

}

})

5、app.js文件：

//app.js

App({

onLaunch: function (options) {

// 判断是否由分享进入小程序

if (options.scene == 1007 || options.scene == 1008) {

this.globalData.share = true

} else {

this.globalData.share = false

};

//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）

//这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把

//页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙

//虽然最后解决了，但是花费了不少时间

wx.getSystemInfo({

success: (res) => {

this.globalData.height = res.statusBarHeight

}

})

},

 

globalData: {

share: false, // 分享默认为false

height: 0,

}

})

6、app.wxss文件（此文件可以不配置）:

pages {

position: relative;

z-index: 9999998;

background: #fff;

}

 

三、在微信小程序页面中：

1、pages文件夹contactUS.wxml文件：

<nav-bar navbar-data='{{nvabarData}}'></nav-bar>

<view class='home-page' style='margin-top: {{height}}px'>

<h4 class="navbar-relation">联系我们</h4>

<view class="iconfont icon-fanhui" style="font-size:36rpx;"></view>

</view>

2、pages文件夹contactUS.json文件中(声明使用的组件，和组件的地址)：

{

"usingComponents": {

"navbar": "../components/navbar/navbar"

}

}

3、pages文件夹contactUS.js文件：

//contactUS.js

//获取应用实例

const app = getApp()

 

Page({

data: {

showIcon: true

},

})

4、pages文件夹contactUS.wxss文件：

/* @import "../Iconfont/iconfont.wxss"; */

 

/* 导航栏样式 */

.home-page{

position: fixed;

height: 140rpx;

width: 100%;

background-color: #EAC100;

z-index: 9999;

}

.navbar-relation {

display: flex;

flex-direction: column;

align-items: center;

line-height: 180rpx;

font-size: 36rpx;

}

.icon-fanhui{

position: absolute;

left: 2%;

top: 65%;

transform: translate(-2%,-50%);

font-weight: bold;

}

说明：关于iconfont图标怎么引入，我的博客里面有详细教程！