App. Js

let menuButtonObject = wx.getMenuButtonBoundingClientRect(); wx.getSystemInfo({ success: res => { let statusBarHeight = res.statusBarHeight, navTop = menuButtonObject.top, // navHeight = statusBarHeight + MenuButtonObject. height + (menuButtonObject. top-statusBarheight) * 2; / / navigation highly this. GlobalData. NavHeight = navHeight; this.globalData.navTop = navTop * 2; this.globalData.windowHeight = res.windowHeight; }, fail(err) { console.log(err); }})Copy the code

Navigation bar component

  • navwrap.wxml

    {{navbarData. Title}} has been blocked

  • navwrap.js

    Const app = getApp() Component({properties: {navbarData: {//navbarData: const app = getApp() Component({properties: {navbarData: {//navbarData: {type: Object, value: {}, observer: Function (newVal, oldVal) {}}, isLno:{type:Boolean, value:false}, backNum:{// return type:Number, value:1}, data: NavbarData: {showCapsule: 1}}, attached: Function () {this.setData({share: app.globaldata.share}) {// Define the height of the navigation bar to align this.setdata ({height: app.globalData.navHeight, statusBarHeight:app.globalData.statusBarHeight }) }, methods: NavigateBack ({delta: this.data.backnum})}, wx.backhome () {wx.switchtab ({url: ‘/pages/index/index’, }) } }

    })

  • navwrap.wxss

    /* Nav-title */. Nav-wrap {position: fixed; width: 100%; top: 0; background: #fff; color: #000; z-index: 9999999; } /* The title should be centered */. 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: 32rpx; color: #2c2b2b; font-weight: 500; } .nav-title text{ background: #FFF4F2; opacity: 1; border-radius: 4rpx; font-size: 20rpx; font-family: Source Han Sans CN; font-weight: 400; color: #FF4A2E; opacity: 1; padding: 4rpx 10rpx; box-sizing: border-box; margin-left: 16rpx; }

    .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; transform: rotate(180deg); } .nav-capsule .back-home { width: 36rpx; height: 40rpx; margin-top: 3rpx; }

Method of use

  • Importing component usage

App. json global import

 "usingComponents": {   "navWrap":"/components/Common/navwrap/navwrap"  },
Copy the code

 .wxml

<navWrap navbarData='{{nvabarData}}'/>
Copy the code

   .js

Data: {nvabarData: {title: 'listing details ', showCapsule: true,}, // header information}Copy the code