資訊專欄INFORMATION COLUMN
前言
世界之大無奇不有，當客戶對于導航欄不滿時候，就需要我們自己去開發了。當然uniapp也有很多自定義導航插件，但現在我們要自己寫。
首先，我們要知道有那幾部分。
可以看到在我們的，這個時候我們自定義的導航欄，需要做到標題于膠囊水平對齊，那其實這個時候整個頭部其實主要又：。
上圖中，微信小程序中，頭部導航欄其實受到右上角膠囊的限制比較大，也就需要我們做改進，我們可以看到：狀態欄的高度+標題欄的高度組成。
狀態欄的高度我們可以通過uni.getSystemInfoSync().statusBarHeight來獲取。
現在要如何獲取標題欄？
如果想要定義標題欄的高度，就要鎖定這個膠囊的位置，在小程序中我們可以使用wx.getMenuButtonBoundingClientRect()獲取關于膠囊的信息
獲取到的膠囊的top，left，right分別對應膠囊的上邊界，左邊界，右邊界相對于屏幕左上角的起點的位置，現在=就來說說我們要怎么修改處理（膠囊上邊界距離頂部的距離 - 狀態欄的高度）*2+膠囊的高度，就是標題欄的高度呢？然后再在標題欄里面添加一個文本區讓他的高度等于膠囊的高度，實現flex布局的上下居中是不是就搞定了呢？
在使用uniapp中，要考慮到多端情況。
在使用uniapp獲取到的狀態欄在h5，小程序和app原生都是有效的，h5網頁中一般就可以直接采用瀏覽器內核給我們內置的網頁導航欄，就是一個頭部，沒有過多的要求，而且瀏覽器不同，給我們提供的頭部導航也不一樣。
而對于app端，我們沒有了像微信小程序中那種讓人心煩的膠囊之后，我們只需要知道狀態欄的高度，然后加上自己業務需求的標題欄樣式和標題欄高度就行啦。
所以我們在進行自定義導航欄封裝的時候就要對代碼進行條件編譯啦。那么我這里呢是把微信小程序做了多帶帶的處理，微信小程序之外的平臺看作是統一狀態。
獻上源碼：
首先我們把獲取設備信息的代碼封裝到一個統一的js文件里面，這樣方便我們在組件中獲取也方便我們在頁面中獲取。
/**
* 此js文件管理關于當前設備的機型系統信息
*/
const systemInfo = function() {
/****************** 所有平臺共有的系統信息 ********************/
// 設備系統信息
let systemInfomations = uni.getSystemInfoSync()
// 機型適配比例系數
let scaleFactor = 750 / systemInfomations.windowWidth
// 當前機型-屏幕高度
let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
// 當前機型-屏幕寬度
let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
// 狀態欄高度
let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
// 導航欄高度 注意：此導航欄高度只針對微信小程序有效 其他平臺如自定義導航欄請使用：狀態欄高度+自定義文本高度
let navHeight = 0 //rpx
// console.log(windowHeight,'哈哈哈哈哈');
/****************** 微信小程序頭部膠囊信息 ********************/
// #ifdef MP-WEIXIN
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
// 膠囊高度
let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
// 膠囊寬度
let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
// 膠囊上邊界的坐標
let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
// 膠囊右邊界的坐標
let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
// 膠囊下邊界的坐標
let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
// 膠囊左邊界的坐標
let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
// 微信小程序中導航欄高度 = 膠囊高度 + (頂部距離 - 狀態欄高度) * 2
navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
// #endif
// #ifdef MP-WEIXIN
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight,
menuButtonHeight,
menuButtonWidth,
menuButtonTop,
menuButtonRight,
menuButtonBottom,
menuButtonLeft,
navHeight
}
// #endif
// #ifndef MP-WEIXIN
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight
}
// #endif
}
export {
systemInfo
}然后我們定義一個導航欄組件
/*
*注意：
*1、在傳入寬度或者高度時，如果是Number數據，傳入的值為px大小,無需帶單位，組件自動計算
*2、在使用此導航欄時，建議傳入UI規定的導航欄高度，此高度只針對除微信小程序的其他平臺有效，微信小程序的導航欄高度，組件自計算
*/
<template>
<view>
<!--微信小程序頭部導航欄-->
<!--#ifdef MP-WEIXIN-->
<view class="wx-head-mod":style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}">
<view class="wx-head-mod-nav":style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
<view class="wx-head-mod-nav-content"
:style="{height:customHeight+'rpx',justifyContent:textAlign==='center'?'center':'left'}">
<!--文本區-->
<view class="wx-head-mod-nav-content-mian"
:style="{width:navTextWidth,lineHeight:customHeight+'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">
{{textContent}}
</view>
<!--返回按鈕-->
<view class="wx-head-mod-nav-content-back":style="{display:isBackShow?'flex':'none'}"
click="backEvent">
<view class="wx-head-mod-nav-content-back-img"
:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
<image:src="backImageUrl"mode=""style="width:100%;height:100%;"></image>
</view>
</view>
</view>
</view>
</view>
<!--#endif-->
<!--除微信小程序之外的其他設備-->
<!--#ifndef MP-WEIXIN-->
<view class="other-head-mod"
:style="{height:navHeightValue*scaleFactor+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}">
<view class="other-head-mod-mian"
:style="{height:navHeightValue*scaleFactor+'rpx',justifyContent:textAlign==='center'?'center':'left'}">
<!--返回按鈕-->
<view class="other-head-mod-mian-back"v-show="isBackShow" click="backEvent">
<view class="other-head-mod-mian-back-img"
:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
<image:src="backImageUrl"mode=""style="width:100%;height:100%;"></image>
</view>
</view>
<!--標題-->
<view class="other-head-mod-mian-title":style="{width:windowWidth-184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',
paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',
fontWeight:fontWeight,color:titleColor}">
{{textContent}}
</view>
</view>
</view>
<!--#endif-->
</view>
</template>
<script>
const app=getApp()
import{systemInfo}from' /common/system-info.js'
export default{
name:"HeadView",
props:{
//文本區域位置left：左center：中
textAlign:{
type:String,
default:'center'
},
//文本區內容
textContent:{
type:String,
default:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好還'
},
//文本區離左邊的距離
textPaddingLeft:{
type:Number,
default:16
},
//是否需要返回按鈕
isBackShow:{
type:Boolean,
default:true
},
//文本區字體大小
fontSize:{
type:Number,
default:20//px
},
//文本區字體粗細
fontWeight:{
type:Number,
default:700
},
//文本區返回按鈕圖片寬
backImageWidth:{
type:Number,
default:12//px
},
//文本區返回按鈕圖片高
backImageHeight:{
type:Number,
default:24//px
},
//返回按鈕圖標路徑
backImageUrl:{
type:String,
default:'/static/backImage.svg'
},
//導航欄整體背景顏色
navBackgroundColor:{
type:String,
default:'#2476F9'
},
//標題字體顏色
titleColor:{
type:String,
default:'#ffffff',
},
/********h5端，app端需要傳入自定義導航欄高度*******/
navHeightValue:{
type:Number,
default:44//px
}
},
computed:{
//文本區寬度
navTextWidth(){
if(this.textAlign==='center'){
return(this.windowWidth-(this.windowWidth-this.menubarLeft)*2)+'rpx'
}else{
return this.menubarLeft+'rpx'
}
},
//文本區paddingLeft
textPaddingleft(){
if(this.textAlign==='center'){
return'0'
}else{
return this.textPaddingLeft+'rpx'
}
}
},
data(){
return{
statusBarHeight:app.globalData.statusBarHeight,//狀態欄高度
navHeight:app.globalData.navHeight,//頭部導航欄總體高度
navigationBarHeight:app.globalData.navigationBarHeight,//導航欄高度
customHeight:app.globalData.customHeight,//膠囊高度
scaleFactor:app.globalData.scaleFactor,//比例系數
menubarLeft:app.globalData.menubarLeft,//膠囊定位的左邊left
windowWidth:app.globalData.windowWidth*app.globalData.scaleFactor
};
},
methods:{
backEvent(){
uni.navigateBack({
delta:1
})
}
},
created(){
/*獲取設備信息*/
const SystemInfomations=systemInfo()
/*通用平臺*/
this.statusBarHeight=SystemInfomations.statusBarHeight//狀態欄高度
this.scaleFactor=SystemInfomations.scaleFactor//比例系數
this.windowWidth=SystemInfomations.windowWidth//當前設備的屏幕寬度
/*微信小程序平臺*/
//#ifdef MP-WEIXIN
this.navHeight=SystemInfomations.navHeight+SystemInfomations.statusBarHeight//頭部導航欄總高度
this.navigationBarHeight=SystemInfomations.navHeight//頭部導航欄高度
this.customHeight=SystemInfomations.menuButtonHeight//膠囊高度
this.menubarLeft=SystemInfomations.menuButtonLeft//膠囊左邊界距離左上角的距離
//#endif
}
}
</script>
<style>
/*#ifdef MP-WEIXIN*/
.wx-head-mod{
box-sizing:border-box;
width:100%;
position:fixed;
top:0;
left:0;
}
.wx-head-mod-nav{
box-sizing:border-box;
width:100%;
position:absolute;
left:0;
display:flex;
justify-content:center;
align-items:center;
}
.wx-head-mod-nav-content{
box-sizing:border-box;
width:100%;
display:flex;
justify-content:left;
align-items:center;
position:relative;
}
/*文本區*/
.wx-head-mod-nav-content-mian{
box-sizing:border-box;
height:100%;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
/*返回按鈕*/
.wx-head-mod-nav-content-back{
box-sizing:border-box;
width:60rpx;
height:100%;
/*background-color:aqua;*/
position:absolute;
top:0;
left:32rpx;
display:flex;
align-items:center;
justify-content:left;
}
.wx-head-mod-nav-content-back-img{
box-sizing:border-box;
}
/*#endif*/
/*#ifndef MP-WEIXIN*/
.other-head-mod{
box-sizing:border-box;
width:100%;
position:fixed;
top:0;
left:0;
}
.other-head-mod-mian{
box-sizing:border-box;
width:100%;
display:flex;
align-items:center;
justify-content:left;
position:absolute;
left:0;
bottom:0;
}
/*返回按鈕*/
.other-head-mod-mian-back{
box-sizing:border-box;
height:100%;
width:60rpx;
position:absolute;
left:32rpx;
top:0;
display:flex;
align-items:center;
}
/*標題*/
.other-head-mod-mian-title{
box-sizing:border-box;
height:100%;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
/*#endif*/
</style>組件使用：
引入組件：
import HeadNav from' /components/HeadNav.vue'
組冊組件：
components:{
HeadNav
},<template> <view class="content"> <head-nav></head-nav> <view class="content-main"></view> </view> </template>
效果圖：
微信小程序：
h5:
app：
在項目里面沒有針對h5時候需要導航欄做特別的限制，如果實際開發中在h5端不需要此導航欄，請在模版上面針對h5頁面加入條件編譯即可。
歡迎大家繼續學習，關注后續更多精彩內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128381.html
摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。 為什么 學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點； 也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。 但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。 項目展示 本...
摘要：本次測試主要參考文檔為選擇器參考手冊主要是安卓微信小程序的選擇器兼容入坑小程序過程中看到微信對支持的選擇器的描述只有六個分別是但是看到給寫的花里胡哨的的庫還有各種花里胡哨的小程序并且還表明支持之前各種無的庫所以我覺得事情并沒有這么簡單趁著元 本次測試主要參考文檔為w3school CSS 選擇器參考手冊 (主要是安卓/ios/微信小程序的css選擇器兼容) 入坑uniapp/小程序過...
摘要：最近在搗鼓項目，恰好用到組件，之前寫了個，后面一直都想寫一個像樣的，可以分享給別人用的組件。自己的水平一般，開發出來的組件可能代碼不咋地，還望路過大神斧正。 uniapp是2019年非常的火爆的一個Dcloud開發跨平臺前端工具，支持ios android wap，小程序，除了android有點卡外，其他暫時沒有發現什么瑕疵。 最近在搗鼓uniapp項目，恰好用到table組件，之前...
摘要：配置配置全解析項目配置文件文件描述項目配置文件項目代碼配置是否檢查域名安全性和版本是否將項目的代碼轉成是否自動補全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項目名項目配置搜索關鍵字客服編譯方式小程序配置項目路由設置第一項為首頁窗 1. 配置 配置全解析 project.config.json ( 項目配置文件 ) { // 文件描述 description: 項目...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 520·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2177·2023-01-20 08:28
