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

2023-10-15 16:38:16

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

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

自定义组件目录

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

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" />
微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

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);
}
微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

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()
      }
    }
  }
})
微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

组件需要使用到的全局变量，在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);
      }
    })
微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

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

.container {
  position: relative;
}

组件的使用

在json文件中引入组件

"usingComponents": {
    "navbar": "../../..//templates/navbar/index"
  }
微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

在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
    })
}
微信小程序自定义头部导航栏，实现左上角返回键和功能键组件 navigationStyle

使用效果展示

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

组件参数含义 

参数 说明 类型

pageName

 页面名称 String
bgColor 按钮背景颜色 String
iconColor 图标颜色 String
fontColor 字体颜色 String 
showNav 是否展示功能键 Boolean

 

 

 

 

 

 

 

 

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

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

上一篇：SpringBoot 实现微信推送模板


下一篇：企业微信api，企业微信sdk接口java调用源码