Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to customize the navigation bar in the development of WeChat Mini Programs, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to customize the navigation bar in the development of WeChat Mini Programs. Let's take a look.

CustomNavBar.wxml

{{navTitle}} {{navTitle}}

CustomNavBar.wxss

.custom-navbar-con {position: relative; width: 100%; background-color: white; z-index: 9999;} .custom-navbar-con .custom-navbar-statusbar-con {width: 100%;} .custom-navbar-con .custom-navbar-content {width: 100%;} .custom-navbar-con .custom-navbar-left-menu-con {position: absolute;} .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn {height: 100%; border-radius: 200px Border: 1px solid rgba (220,220,0.6);} .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .icon {height: 90%; margin-top: 2.5%;} .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .text {font-size: 27rpx;} .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back {border: none } .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back~.custom-navbar-icon-btn.home {margin-left: 10rpx;} .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.switch-shop {padding-left: 5px; padding-right: 25rpx;} .custom-navbar-con.ios .custom-navbar-title.android {display: none } .custom-navbar-con.android .custom-navbar-title.ios {display: none;} .custom-navbar-con .custom-navbar-title.ios {font-weight: bold; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%);-webkit-transform: translate (- 50%,-50%);} .custom-navbar-con .custom-navbar-title.android {padding-left: 30rpx;} ```

CustomNavBar.js

````javascriptmodule.exports = function (PageInstance) {let App = getApp () let _ tplData = {_ CustomNavBar_: {navRightMenuRect: App.NavRightMenuRect, navRightMenuCenterY: App.NavRightMenuCenterY, statusBarHeight: App.StatusBarHeight, winWidth: App.WinWidth, winHeight: App.WinHeight, iOS: App.iOS, navTitle:'', / / currently only suitable for short titles. For long titles, it is recommended to hide the custom navigation bar. Custom display navHeight: App.CustomNavHeight, needFixed: false, showNavBar:! App.NavRightMenuRect? False: true, showLeftMenu: true, showBackBtn: true, showHomeBtn: false}} let _ tplMethods = {customNavBarBack () {wx.navigateBack ()} CustomNavBarBackToHome () {let url ='/ pages/index/index' wx.reLaunch ({url: url})} let isIndexPage =!! (PageInstance.route = = 'pages/index/index') let pages = getCurrentPages () if (pages.length = = 1) {_ tplData._CustomNavBar_.showBackBtn = false _ tplData._CustomNavBar_.showHomeBtn =! isIndexPage} / / each page can configure custom navigation bar if (PageInstance.data.CustomNavBarConfig) {Object.assign (_ tplData._CustomNavBar_) separately PageInstance.data.CustomNavBarConfig)} / /! Finally, execute / / when the layout position of the button capsule in the upper right corner cannot be obtained, force the custom navigation bar to be hidden if (! App.NavRightMenuRect) {_ tplData._CustomNavBar_.showNavBar = false} Object.assign (PageInstance, _ tplMethods) PageInstance.setData (_ tplData) return this}

Configuration of app.js

/ / Custom navigation bar import CustomNavBar from'. / template/CustomNavBar/CustomNavBar' App ({/ / Custom templated components CustomNavBar, / / system Information WinWidth: 0, WinHeight: 0, StatusBarHeight: 0, PixelRatio: 1, SystemFullName:', SystemVersion:', SystemSDKVersion:'', / / Custom Navigation Bar related NavRightMenuRect: null, NavRightMenuCenterY: 0, CustomNavHeight: 0 OnLaunch: function (options) {let self = this let systemInfo = wx.getSystemInfoSync () self.iOS = systemInfo.platform = = 'ios' self.isDebug = systemInfo.platform = =' devtools' if (self.isDebug) {/ / simply to debug the custom navigation bar under the development tool / / there is no distinction between the App version number under the development tool systemInfo.version = '7.0.0'} self.WinWidth = systemInfo.windowWidth self.WinHeight = systemInfo. WindowHeight self.StatusBarHeight = systemInfo.statusBarHeight / / some Mini Program library versions do not return status bar height if (! self.StatusBarHeight) {self.StatusBarHeight = 20} self.PixelRatio = Math.max (systemInfo.pixelRatio) 2) self.SystemFullName = systemInfo.system self.SystemVersion = systemInfo.version self.SystemSDKVersion = systemInfo.SDKVersion / / the custom navigation bar for the global configuration of app.json If the client requirement version is 6.6.0 / / the custom navigation bar configured separately for each page, the client requirement version is 7.0.0 / / wx.getMenuButtonBoundingClientRect method, and the basic library version is 2.1.0 if (self.compareVersion (self.SystemVersion, '6.6.0') > = 0) {/ / official 6.6.0 or above client Models with a minimum basic library version of 1.9.4 / / 6.6.0 and within the range of [1.9.4-2.1.0] cannot use wx.getMenuButtonBoundingClientRect / /, so manually write the layout location of the adaptation capsule for a non-full screen phone self.NavRightMenuRect = {top: 26, bottom: 58, right: self.WinWidth-10, width: 87 Height: 32} / / if the height of the status bar returned by the system information is greater than 20 It is believed that bug appeared in the full-screen mobile phone if (self.StatusBarHeight > 20) {self.NavRightMenuRect.top = 50 self.NavRightMenuRect.bottom = 82} / / 22:09:22 on August 21, 2019 / / Wechat Mini Library, resulting in no return value for wx.getMenuButtonBoundingClientRect on some models / / so write a NavRightMenuRect by default before that. The global custom navigation bar is hidden but cannot be displayed / / for more information, see https://developers.weixin.qq.com/community/develop/doc/00062238d78e880aedd88b72351c00 if (wx.getMenuButtonBoundingClientRect) {let NavRightMenuRect = wx.getMenuButtonBoundingClientRect () self.NavRightMenuRect = {top: NavRightMenuRect.top, bottom: NavRightMenuRect.bottom, right: NavRightMenuRect.right, width: NavRightMenuRect.width Height: NavRightMenuRect.height}} self.NavRightMenuCenterY = self.NavRightMenuRect.top + self.NavRightMenuRect.height / 2 self.CustomNavHeight = self.NavRightMenuRect.bottom + (self.NavRightMenuRect.top-self.StatusBarHeight)} else {self.NavRightMenuRect = null self.CustomNavHeight = 0}}, / / compare two version numbers compareVersion (v1, v2) = > {v1 = v1.split ('.') V2 = v2.split ('.') Const len = Math.max (v1.length, v2.length) while (v1.length

Num2) {return 1} else if (num1 < num2) {return-1}} return 0}})

If referenced on the index page

Index.wxml

Index.js

OnLoad: function (options) {new App.CustomNavBar (this)} this is the end of the article on how to customize the navigation bar in WeChat Mini Programs's development. Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to customize the navigation bar in the development of WeChat Mini Programs". If you want to learn more knowledge, you are welcome to follow 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.