微信小程序自定義導航欄（模板化）
更新時間：2019年11月15日 11:35:43 作者：劉家軍
這篇文章主要為大家詳細介紹了微信小程序自定義導航欄（模板化），文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前段時間寫過一篇關于微信小程序自定義導航欄的自定義組件，但是對于分享頁有一定的bug
這次用模板化又搞了一遍 優(yōu)化了下Android與IOS 顯示更接近微信原生的導航欄，以及修復分享頁面不顯示返回首頁按鈕
如果大家不習慣模板化的話可以 針對自己的需求拿以前封裝的組件化做一些修改
微信小程序自定義導航欄(組件化)
CustomNavBar.wxml
<template name="CustomNavBar">
<block wx:if="{{ showNavBar }}">
<!-- 自定義導航欄懸浮時，卡空行 -->
<block wx:if="{{ needFixed }}">
<view style="position: relative; width: 100%; height: {{ navHeight }}px;"></view>
</block>
<view class="custom-navbar-con relative {{ iOS ? ' ios ' : ' android ' }}" style="height: {{ navHeight }}px; {{ needFixed ? 'position: fixed; top: 0;' : '' }}">
<view class="custom-navbar-statusbar-con relative" style="height: {{ statusBarHeight }}px;"></view>
<view class="custom-navbar-content relative" style="height: {{ navHeight - statusBarHeight }}px;">
<!-- iOS端的導航欄顯示方式 -->
<block wx:if="{{ navTitle && navTitle.length > 0 }}">
<view class="custom-navbar-title ios">{{ navTitle }}</view>
</block>
<block wx:if="{{ showLeftMenu }}">
<view class="custom-navbar-left-menu-con clearfix" style="top: {{ navRightMenuRect.top - statusBarHeight - 1 }}px; left: {{ winWidth - navRightMenuRect.right }}px; height: {{ navRightMenuRect.height + 2 }}px;">
<block wx:if="{{ showBackBtn }}">
<view class="custom-navbar-icon-btn pull-left back" style="height: {{ navRightMenuRect.height }}px" bindtap="customNavBarBack">
<image class="icon" src="../../image/icon-nav-back.png" mode="aspectFit" style="width: {{ navRightMenuRect.height }}px;" />
<text class="text"></text>
</view>
</block>
<block wx:if="{{ showHomeBtn }}">
<view class="custom-navbar-icon-btn pull-left home" style="height: {{ navRightMenuRect.height }}px" bindtap="customNavBarBackToHome">
<image class="icon" src="../../image/icon-nav-home.png" mode="aspectFit" style="width: {{ navRightMenuRect.height }}px;" />
<text class="text"></text>
</view>
</block>
<!-- android端的導航欄顯示方式 -->
<block wx:if="{{ navTitle && navTitle.length > 0 }}">
<view class="custom-navbar-title android pull-left" style="line-height: {{ navRightMenuRect.height - 2 }}px;">{{ navTitle }}</view>
</block>
</view>
</block>
</view>
</view>
</block>
</template>
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, 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
```javascript
module.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: '', // 當前只合適短標題，如需長標題，建議隱藏自定義導航欄，自定義展示
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
}
// 每個頁面 可單獨配置自定義導航欄
if (PageInstance.data.CustomNavBarConfig) {
Object.assign(_tplData._CustomNavBar_, PageInstance.data.CustomNavBarConfig)
}
// !!!! 最后執(zhí)行
// 當無法獲取到右上角按鈕膠囊的布局位置時，強制設置自定義導航欄為隱藏狀態(tài)
if (!App.NavRightMenuRect) {
_tplData._CustomNavBar_.showNavBar = false
}
Object.assign(PageInstance, _tplMethods)
PageInstance.setData(_tplData)
return this
}
app.js的配置
// 自定義導航欄
import CustomNavBar from './template/CustomNavBar/CustomNavBar';
App({
//自定義 模板式 組件
CustomNavBar,
// 系統(tǒng)信息
WinWidth: 0,
WinHeight: 0,
StatusBarHeight: 0,
PixelRatio: 1,
SystemFullName: '',
SystemVersion: '',
SystemSDKVersion: '',
//自定義導航欄相關
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) {
// 單純?yōu)榱嗽陂_發(fā)工具下調試 自定義導航欄
// 開發(fā)工具下不存在App版本號的區(qū)分
systemInfo.version = '7.0.0'
}
self.WinWidth = systemInfo.windowWidth
self.WinHeight = systemInfo.windowHeight
self.StatusBarHeight = systemInfo.statusBarHeight
// 部分小程序庫版本沒有返回狀態(tài)欄高度
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
// app.json全局配置的自定義導航欄的話，客戶端需求版本為6.6.0
// 每個頁面 單獨配置的自定義導航欄的話，客戶端需求版本為7.0.0
// wx.getMenuButtonBoundingClientRect方法，要求基礎庫版本為2.1.0
if (self.compareVersion(self.SystemVersion, '6.6.0') >= 0) {
// 官方的6.6.0版本以上客戶端，最低基礎庫版本為1.9.4
// 6.6.0以上且[1.9.4 - 2.1.0]范圍內的機型無法使用wx.getMenuButtonBoundingClientRect
// 所以手動寫死非全面屏手機的適配膠囊布局位置
self.NavRightMenuRect = {
top: 26,
bottom: 58,
right: self.WinWidth - 10,
width: 87,
height: 32
}
// 如果系統(tǒng)信息返回的狀態(tài)欄高度大于20，認為是全面屏手機
if (self.StatusBarHeight > 20) {
self.NavRightMenuRect.top = 50
self.NavRightMenuRect.bottom = 82
}
// 2019年08月21日22:09:22
// 微信小程序庫出現(xiàn)bug，導致部分機型wx.getMenuButtonBoundingClientRect無返回值
// 所以在這之前先默認寫死一個NavRightMenuRect，防止全局的自定義導航欄已經隱藏了但是無法顯示自定義導航欄
// 詳見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
}
},
// 比較兩個版本號
compareVersion (v1, v2) => {
v1 = v1.split('.')
v2 = v2.split('.')
const len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i])
const num2 = parseInt(v2[i])
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
}),
假如在index 頁面引用
index.wxml
<!-- 自定義NavBar -->
<import src="../../template/CustomNavBar/CustomNavBar.wxml" />
<template is="CustomNavBar" data="{{ ..._CustomNavBar_ }}"></template>
index.js
onLoad: function(options) {
new App.CustomNavBar(this)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了用window.onerror捕獲并上報Js錯誤的方法,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了JS簡易的計算器實現(xiàn)代碼,，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能【附源碼下載】
這篇文章主要介紹了微信小程序使用toast消息對話框提示用戶忘記輸入用戶名或密碼功能,結合實例形式詳細分析了toast組件實現(xiàn)消息提示功能的相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要是對html與javascript在瀏覽器中的加載順序問題進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章給大家總結了JS設置CSS樣式的幾種方式，每種方式都非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
有時候頁面中的正文一般都加上了字體大中小控制代碼，方便瀏覽者閱讀。2010-09-09
關于laydate.js加載laydate.css路徑錯誤問題解決
日期時間選擇插件 laydate.js相信對大家來說都不陌生，這篇文章主要給大家介紹了關于laydate.js加載laydate.css路徑錯誤問題解決的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要介紹了JS簡單添加元素新節(jié)點的方法,結合實例形式分析了javascript針對頁面元素節(jié)點的創(chuàng)建、添加、克隆等相關操作技巧,需要的朋友可以參考下2018-02-02
淺談js中的attributes和Attribute的用法與區(qū)別
這篇文章主要介紹了淺談js中的attributes和Attribute的用法與區(qū)別，attributes可以獲取一個對象中的一個屬性，attributes 屬性返回指定節(jié)點屬性的集合，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
JavaScript中檢測數(shù)據(jù)類型的四種方法
這篇文章主要給大家分享的是JavaScript中檢測數(shù)據(jù)類型的四種方法，有 typeof、instanceof、constructor、Object.prototype.toString.call()，下面文章詳細介紹內容，需要的小伙伴可以參考一下2022-01-01