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

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

原文地址

navigationStyle

要用自定义的导航栏只需要在app.json中配置

app.json

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

组件目录：

组件目录

index.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'>// 导航栏  左上角的返回按钮 和home按钮//  其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>//左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示//从分享进入小程序时 返回上一级按钮不应该存在<view bindtap='_navback' wx:if='{{!share}}'><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></view></view>
</view>

index.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;
}

index.json文件（自定义组件必须）：

{"component": true
}

index.js文件：

const app = getApp()
Component({properties: {navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名type: Object,value: {},observer: function (newVal, oldVal) {}}},data: {height: '',//默认值  默认显示左上角navbarData: {showCapsule: 1}},attached: function () {// 获取是否是通过分享进入的小程序this.setData({share: app.globalData.share})// 定义导航栏的高度   方便对齐this.setData({height: app.globalData.height})},methods: {// 返回上一页面_navback() {wx.navigateBack()},//返回到首页_backhome() {wx.switchTab({url: '/pages/index/index',})}}}) 

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,  // 分享默认为falseheight: 0,}})

app.wxss文件:

/**app.wxss**/
pages {position: relative;z-index: 9999998;background: #fff;
}

如何使用自定义导航栏：
文件目录图

文件目录图

在微信小程序页面中：
pages文件夹index.wxml文件：

// 引入自定义组价。'navbar-data'中navbar是自定义名字，决定了组件中'navbarData'的名字
<nav-bar navbar-data='{{nvabarData}}'></nav-bar><view class='home-page' style='margin-top: {{height}}px'>home page
</view>

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

{"usingComponents": {"nav-bar": "/commpents/navbar/index"}
}

pages文件夹index.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)}
})

pages文件夹index.wxss文件：

/**index.wxss**/
.home-page {height: 160rpx;width: 100%;border: 1rpx solid red;font-size: 60rpx;
}

由自定义组件引发的一些问题，1.下拉刷新：当页面内容高度不够屏幕高度时，ios的下拉刷新将会出现----拉下来，上不去了，也是偶尔出现。解决方法就是页面设置个最小高度，精准一点就是页面的高度 + 下拉刷新时顶部内容距离顶部的高度。

1. 我忘了。。。。

各位如果有更好的，请告诉我