微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

自定义左上角返回键和功能键组件，需要将app.json中的widow下navigationStyle属性设置为custom，但是设置该值之后，需要在每个页面都引入自定义的组件

"window": {
    "navigationStyle": "custom"
  },

自定义组件目录

​

index.wxml文件

<view class="navbar custom-class" style='height:{{navHeight}}px;" style="color: rgb(128, 0, 0);">'>
  <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;" style="color: rgb(128, 0, 0);">'>
      <!-- <van-icon name="arrow-left" color="{{iconColor}}" size="16px" block="{{true}}" class="navbar-action_item" bind:click="navBack"></van-icon>
      <van-icon name="wap-home-o" color="{{iconColor}}" size="16px" block="{{true}}" class="navbar-action_item last" bind:click="toIndex"></van-icon> -->
      <view class="navbar-action_item iconfont icon-fanhuianniu" style='color:{{iconColor}}' bindtap="navBack"></view>
      <view class="navbar-action_item las iconfont icon-mulu" style='color:{{iconColor}}' bindtap="toIndex"></view>
  </view>
  <view class='navbar-title' style='top:{{navTop}}px; color: {{fontColor}}'>
    {{pageName}}
  </view>
</view>
<view wx:if="{{showPop}}" class="popup popover popover-light" style="margin: 0px;z-index: 2005; position: absolute; left: 20px;top:{{navTop + 40}}px;">
  <view class="popover-arrow"></view>
  <view class="popover-content">
    <view class="pop-item" bindtap="goto" data-page='index'>
      <view class="iconfont icon-shouye pop-icon"></view>
      <view class="pop-name">首页</view>
    </view>
    <view class="pop-item" bindtap="goto" data-page='cart'>
      <view class="iconfont icon-gouwuche2 pop-icon"></view>
      <view class="pop-name">购物车</view>
    </view>
    <view class="pop-item" bindtap="goto" data-page='my'>
      <view class="iconfont icon-wode pop-icon"></view>
      <view class="pop-name">个人中心</view>
    </view>
    <view class="pop-item" bindtap="goto" data-page='class'>
      <view class="iconfont icon-shangpinfenlei pop-icon"></view>
      <view class="pop-name">商品分类</view>
    </view>
    
    <view class="pop-item pop-icon" bindtap="goto" data-page='footprint' style="border: none;">
      <view class="iconfont icon-zuji"></view>
      <view class="pop-name">我的足迹</view>
    </view>
  </view>
</view>
<van-overlay z-index="11" class="overlay" show="{{ showPop }}" bind:click="onClickHide" />

index.wxss文件

/* components/navbar/index.wxss */

.navbar {
  width: 100%; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 10; flex-shrink: 0; } .navbar-title { width: 100%; box-sizing: border-box; padding-left: 115px; padding-right: 115px; height: 32px; line-height: 32px; text-align: center; position: absolute; left: 0; z-index: 10; color: #333; font-size: 16px; /* font-weight: bold; */ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .navbar-action-wrap { display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; left: 10px; z-index: 11; line-height: 1; padding-top: 4px; padding-bottom: 4px; } .navbar-action-group { border: 1px solid #f0f0f0; border-radius: 20px; overflow: hidden; } .navbar-action_item { padding: 3px 0; color: #333; } .navbar-action-group .navbar-action_item { border-right: 1px solid #f0f0f0; padding: 3px 14px; } .navbar-action-group .last { border-right: none; } .popover-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6px; left: 60px; top: 0; border-top-width: 0; border-bottom-color: currentColor; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); color: #fff; } .popover-content { background-color: #fff; box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12); overflow: hidden; /* border-radius: 8px; */ padding: 10px; } .popup { position: fixed; max-height: 100%; overflow-y: auto; background-color: #fff; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-overflow-scrolling: touch; } .popover { position: absolute; overflow: visible; background-color: transparent; -webkit-transition: opacity 0.15s, -webkit-transform 0.15s; transition: opacity 0.15s, -webkit-transform 0.15s; transition: opacity 0.15s, transform 0.15s; transition: opacity 0.15s, transform 0.15s, -webkit-transform 0.15s; } .pop-item { display: flex; width: 110px; height: 30px; line-height: 30px; padding: 5px; border-bottom: 1px solid #eee; } .pop-name { margin-left: 10px; font-size: 16px; } .pop-icon { font-size: 18px; } .overlay .van-overlay { background: rgba(0,0,0,0); }

index.json文件(需要使用到vant-weapp组件，具体使用请参考官网https://vant-contrib.gitee.io/vant-weapp/#/card)

{
  "component": true, "usingComponents": { "van-icon": "../../dist/packages/vant-weapp/icon/index", // 图标 "van-overlay": "../../dist/packages/vant-weapp/overlay/index" // 遮罩层  } }

index.js文件

// components/navbar/index.js
const app = getApp();

Component({
  options: {
    addGlobalClass: true, }, /** * 组件的属性列表 */ properties: { pageName: String, bgColor: String, iconColor: String, fontColor: String, showNav: Boolean, showHome: { type: Boolean, value: true } }, /** * 组件的初始数据 */ data: { showPop: false }, lifetimes: { attached: function () { this.setData({ navHeight: app.globalData.navHeight, navTop: app.globalData.navTop, windowHeight: app.globalData.windowHeight }) } }, /** * 组件的方法列表 */ methods: { //回退  navBack: function () { console.log('返回按钮') wx.navigateBack({ delta: 1 }) }, //回主页  toIndex: function () { console.log('打开tab页面') this.setData({ showPop: true }) }, onClickHide: function() { this.setData({ showPop: false }) }, goto: function(e) { var page = e.currentTarget.dataset.page if ('index' === page) { wx.reLaunch({ url: '/pages/index/index' }) this.onClickHide() } else if ('cart' === page) { wx.reLaunch({ url: '/pages/cart/cart' }) this.onClickHide() } else if ('my' === page) { wx.reLaunch({ url: '/pages/my/my' }) this.onClickHide() } else if ('class' === page) { wx.reLaunch({ url: '/pages/class/class' }) this.onClickHide() } else if ('footprint' === page) { wx.navigateTo({ url: '/pages/my/footprint/footprint' }) this.onClickHide() } } } })

组件需要使用到的全局变量，在app.js的onLoad函数中定义

let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => { let statusBarHeight = res.statusBarHeight, navTop = menuButtonObject.top,//胶囊按钮与顶部的距离 navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度 this.globalData.navHeight = navHeight; this.globalData.navTop = navTop; this.globalData.windowHeight = res.windowHeight; }, fail(err) { console.log(err); } })

全局样式app.wxss页面样式修改

.container {
  position: relative;
} 

组件的使用

在json文件中引入组件

"usingComponents": {
    "navbar": "../../..//templates/navbar/index" }

在wxml中使用组件

<navbar page-name="订单列表" bg-color="white" icon-color="black" font-color="black" show-nav="{{true}}"></navbar>
<!-- 我们的页面开始 -->
<view class="container" style="top: {{navHeight}}px"> // 需要距离顶部一定的高度，不然页面内容会被导航栏遮盖， container 样式需要定义position: relative，可以在app.wxss定义全局样式
也可以定义在指定的wxss文件中

在js文件中引入全局变量导航栏高度

onLoad: function (options) {
    this.setData({ navHeight: app.globalData.navHeight }) }

使用效果展示

​​

组件参数含义 

参数	说明	类型
pageName	页面名称	String
bgColor	按钮背景颜色	String
iconColor	图标颜色	String
fontColor	字体颜色	String
showNav	是否展示功能键	Boolean

 

 

 

 

 

 

 

 

参考文章：https://www.cnblogs.com/sese/p/9761713.html