Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how WeChat Mini Programs implements the custom navigation bar. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. To implement a custom navigation bar, you must first configure it globally.

App.json page

Window: {. "navigationStyle": "custom"}

According to WeChat Mini Programs's official documents, only the client version 7.0.0 or above supports the implementation of a custom navigation bar for local pages, while versions below 7.0.0 only support a custom navigation bar for all pages. This is the kind of navigation bar used in your own project.

App.js page

App ({onLaunch: function (options) {var _ this = this / / Custom navigation bar to obtain the height of the window at the top of the device (the height of the window varies with different devices, according to this to set the height of the custom navigation bar) wx.getSystemInfo ({success: (res) = > {/ / basic library 2.1.0 supports wx.getMenuButtonBoundingClientRect () The lower version needs to be adapted to let custom = wx.getMenuButtonBoundingClientRect () / / console.log ('height of status bar', res.statusBarHeight) / / console.log ('height of capsule button in upper right corner', custom.height) / / console.log ('upper boundary coordinates of capsule button in upper right corner', custom.top) / / console.log ('lower boundary coordinates of capsule button in upper right corner' Custom.bottom) _ this.globalData.statusBarHeight = res.statusBarHeight _ this.globalData.navBarHeight = custom.height + (custom.top-res.statusBarHeight) * 2}})}, globalData: {/ / Global data statusBarHeight: 0, navBarHeight: 0,},})

2. Create a custom navigation bar component. The component directory is / components/navbar

Navbar.wxml page

{{navbarData.title}}

Navbar.js page

Const app = getApp () Component ({/ / multipleSlots enables multi-slot mode for components options: {multipleSlots: true,}, / / externalClasses specifies multiple external style classes externalClasses for components: ['nav-bgc-class',' nav-title-class','ex-back-pre'], / / properties components are used to store external data properties: {navbarData: {/ / navbarData data passed by the parent page The variable name is self-named type: Object, value: {}, observer: function (newVal, oldVal) {}},}, / / the component is used to store internal private data data: {/ / customize the height of the navigation bar statusBarHeight: app.globalData.statusBarHeight, navBarHeight: app.globalData.navBarHeight}, / / attached function is triggered when the component enters the page node tree, you can use setData Most initialization works at this time to attached: function () {}, / / various methods in the methods object definition component methods: {/ / return key, trigger custom events, and send the returned events to the parent page to define _ navback () {this.triggerEvent ('goBack')})

Navbar.json page

{"component": true}

Navbar.wxss page

/ * the top fixed position title should be centered and the custom button and title should be aligned with the original capsule of Wechat on the right * / .nav-wrap {position: fixed; width: 750rpx; top: 0; left: 0; right: 0; background: # f4f4f4; / * background-color: pink; * / z-index: 9999999; transform: translate3d (0,0,0);} / * return key * / .nav-capsule {width: 140rpx / * background-color: skyblue; * / / * Center the picture elements vertically * / display: flex; align-items: center;}. Back-pre {width: 100rpx; height: 68rpx; / * background-color: green; * /} / * title * / .nav-title {position: absolute; left: 0; right: 0; bottom: 0; max-width: 400rpx; margin: auto; / * background-color: deeppink * / / * horizontal and vertical center * / display: flex; align-items: center; justify-content: space-around; / * the extra ellipsis shows * / overflow: hidden; text-overflow: ellipsis; white-space: nowrap; / * Font setting * / color: # 111111; font-size: 32rpx; font-weight: 500;}

3. Use custom navigation bar components on other pages (default style needs to be modified)

Transation_detail.json page

{"usingComponents": {"nav-bar": "/ components/navbar/navbar",}}

Transation_detail.wxml page

Transation_detail.wxss page

/ * the style of the navigation bar component that needs to be imported from the outside * / / * the navigation bar background color * / .ex-nav-bgc-class {background: transparent! important;} / * navigation bar title color * / .ex-nav-title-class {color: # fff! important;} / * navigation bar return key style * / .ex-back-pre {width: 60rpximportant; height: 60rpximportant; margin-top: 4rpximportant Padding: 40rpximportance;}

Transation_detail.js page

Const app = getApp () Page (initial data of {/ * page * / data: {/ / parameters required for customizing the navigation bar nvabarData: {showCapsule: 1, / / whether to display the icon in the upper left corner 1 indicates that 0 is displayed, indicating that title is not displayed:'' / / the title in the middle of the navigation bar backSrc:'/ img/back3.png' / / return key style}, / / the distance of the page content from the top of the page height: app.globalData.statusBarHeight + app.globalData.navBarHeight,}, / * Lifecycle function-listen for page loading * / onLoad: function (options) {} / / Click the page to be returned when you click the top return key _ goBack () {wx.switchTab ({url:'/ pages/mer_index/mer_index',})},})

4. Custom navigation bar can not transfer the style, and then the default style will be used.

Order.wxml page

Order.js page

Const app = getApp () Page (initial data of {/ * page * / data: {/ / parameters required for custom navigation bar nvabarData: {showCapsule: 1, / / whether to display the icon in the upper left corner 1 indicates that 0 indicates that title is not displayed: 'existing warehouse receipt', / / title in the middle of the navigation bar} / / the distance from the top of this page is all the contents of the article "how to customize the navigation bar for WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.