1. 前言
小程序開發(fā)中，有時(shí)我們不需要自帶的導(dǎo)航欄，那就需要自己寫一個(gè)這樣的導(dǎo)航欄。
2. 效果展示
3.文件目錄結(jié)構(gòu)
├── root
│ ├── components
│ │ └── navbar
│ │ ├── index.js
│ │ ├── index.wxml
│ │ ├── index.json
│ │ ├── index.wxss
│ ├──pages
│ │ ├── index.js
│ │ ├── index.wxml
│ │ ├── index.json
│ │ ├── index.wxss
└──── app.js
4.如何使用
pages/index
<navbar navbar-data="{{navbarData}}"></navbar>
Page({
data: {
navbarData: {
showCapsule: 1, //是否顯示頭部左上角小房子 1顯示 0 不顯示
showBack: 1, //是否顯示返回 1顯示 0不顯示
// showColor: 0, //navbar背景顏色 1展示 0不展示
// navigationBarColor: 'yellow',
bgTransparent: true, // 時(shí)候否透明
iconColor: 'black',
titleColor: 'black',
title: '首頁(yè)'
},
},
})
5. 實(shí)現(xiàn)代碼
需要現(xiàn)在app.js啟動(dòng)的時(shí)候獲取一些信息
app.js
// app.js
App({
onLaunch() {
const { statusBarHeight, titleBarHeight } = getStatusBarHeight()
console.log(statusBarHeight, titleBarHeight)
this.globalData.statusBarHeight = statusBarHeight;
this.globalData.titleBarHeight = titleBarHeight;
},
globalData: {
statusBarHeight: "",
titleBarHeight: ""
}
})
function getStatusBarHeight() {
let res = wx.getSystemInfoSync()
let customTitleBarHeight;
try {
const menuInfo = wx.getMenuButtonBoundingClientRect();
if (equalVersion(res.version, "7.0.3")) {
customTitleBarHeight =
menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2;
} else {
customTitleBarHeight = menuInfo.height + menuInfo.top * 2;
}
} catch (e) {
customTitleBarHeight = 48;
}
if (res.model.indexOf("iPhone") !== -1) {
customTitleBarHeight = 44;
}
return {
statusBarHeight: res.statusBarHeight,
titleBarHeight: customTitleBarHeight,
}
};
function equalVersion(curV, reqV) {
let arr1 = curV.split(".");
let arr2 = reqV.split(".");
let maxL = Math.max(arr1.length, arr2.length);
let pos = 0;
let diff = 0;
while (pos < maxL) {
diff = parseInt(arr1[pos]) - parseInt(arr2[pos]);
console.log(diff, parseInt(arr1[pos]), parseInt(arr2[pos]));
if (diff != 0) {
break;
}
pos++;
}
if (diff > 0 || diff == 0) {
//新版本、穩(wěn)定版
return 1;
} else {
// 舊版本
return 0;
}
}
下面是組件代碼
component/navbar.js
/**
* 自定義頭部
*/
const app = getApp()
// 版本號(hào)比較函數(shù)
function 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
}
Component({
properties: {
navbarData: { //navbarData 由父頁(yè)面?zhèn)鬟f的數(shù)據(jù)，變量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal, changedPath) {
if (newVal == null && typeof (oldVal) == 'object') {
try {
var _o = {};
var defaultData = {
statusBarHeight: '',
titleBarHeight: '',
navbarData: {
showCapsule: 1, //是否顯示左上角小房子 1顯示 0 不顯示
showBack: 1, //是否顯示返回 1顯示 0不顯示
showColor: 1, //navbar背景顏色 1藍(lán)色 0白色
navigationBarColor: '#ffffff',
bgTransparent: false, // true 背景為透明 false 不透明(下面兩個(gè)屬性也不生效)
iconColor: 'black', // white 左側(cè)icon顏色
titleColor: '#000000' // 可以指定title具體色值
}
}
_o['navibarData'] = defaultData['navbarData']
this.setData(_o);
} catch (e) {
}
} else {
// var data = this.data;
var data = {};
var path = 'navibarData';
Object.keys(newVal).forEach(key => {
data[`${path}.${key}`] = newVal[key];
})
this.setData(data);
}
}
}
},
data: {
statusBarHeight: '',
titleBarHeight: '',
showNavbar: '',
menuButtonInfo: {},
navibarData: {
showCapsule: 0, //是否顯示左上角小房子
showBack: 1, //是否顯示返回
showColor: 1, //navbar背景顏色,
navigationBarColor: '#ffffff',
bgTransparent: false, // true 背景為透明 false 不透明(下面兩個(gè)屬性也不生效)
iconColor: 'black', // white 左側(cè)icon顏色
titleColor: '#000000' // 可以指定title具體色值
}
},
attached: function () {
if (wx.getSystemInfoSync().platform.toLowerCase().indexOf('devtools') != -1) {
this.setData({
showNavbar: true
});
} else {
// 獲取版本號(hào)
const version = wx.getSystemInfoSync().version
if (compareVersion(version, '7.0.0') >= 0) {
// 版本號(hào)大于7.0.0時(shí)，顯示自定義頭部
this.setData({
showNavbar: true
})
} else {
// // 版本號(hào)低于7.0.0時(shí)，隱藏自定義頭部
this.setData({
showNavbar: false
})
}
}
this.setData({
statusBarHeight: app.globalData.statusBarHeight,
titleBarHeight: app.globalData.titleBarHeight
});
//獲取右上角膠囊的大小，為顯示自定義icon做準(zhǔn)備
this.setData({
menuButtonInfo: wx.getMenuButtonBoundingClientRect()
});
},
ready() {
try {
const currentPages = getCurrentPages()
const _o1 = {}
//無(wú)論如何返回按鈕出現(xiàn)的規(guī)則不變
if (currentPages.length > 1) {
_o1.showBack = true;
} else {
_o1.showBack = false;
}
this.setData({
navibarData: {
...this.data.navibarData,
..._o1
}
})
} catch (e) {
}
},
methods: {
//返回到首頁(yè)
_backhome(e) {
wx.switchTab({
url: '/pages/home/homepage',
});
},
_backlast(e) {
wx.navigateBack();
},
},
})
component/navbar.wxml
<view style="padding-top:{{navibarData.bgTransparent ? 0 : (statusBarHeight+titleBarHeight)}}px" wx:if='{{showNavbar}}'>
<view wx:if='{{navibarData.bgTransparent}}' class="nav-wrap b-nav-wrap transparent-bg">
<template is="titleBarContent" data="{{statusBarHeight,titleBarHeight,navibarData,menuButtonInfo}}"/>
</view>
<block wx:else>
<view wx:if='{{navibarData.showColor}}' class="nav-wrap" style='background-color:{{navibarData && navibarData.navigationBarColor}};'>
<template is="titleBarContent" data="{{statusBarHeight,titleBarHeight,navibarData,menuButtonInfo}}"/>
</view>
<view wx:else class="nav-wrap b-nav-wrap">
<template is="titleBarContent" data="{{statusBarHeight,titleBarHeight,navibarData,menuButtonInfo}}"/>
</view>
</block>
</view>
<template name="titleBarContent">
<view class="status-bar" style="height:{{statusBarHeight}}px"></view>
<view class="title-bar" style="height:{{titleBarHeight}}px">
<view class="title-bar-group {{navibarData.showBack ^ navibarData.showCapsule ? 'only-group-icon' : navibarData.showBack && navibarData.showCapsule ? '' :'no-group-icon'}}">
<view class="title-bar-icon" bindtap='_backlast' wx:if='{{navibarData.showBack}}'>
<image wx:if="{{navibarData.bgTransparent&&navibarData.iconColor == 'white'}}" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAApVBMVEUAAAD///+4/eNVAAAANnRSTlMACPH9+vbrsCsF5LwTDALcPTYhAd/Ik4J4ZFRMRkIyG9LNt6SZjGAvFg/Z1cKnoIdyaFomm2zHx4MpAAABcElEQVRYw+2YaXKCQBhEhwFRcEXBfd8xxpiYzP2PltR0pbzA+5FU8Q7w/tD012AqKir+B8F8ifp6qXM70DeJ3A8NStcZOs8J8rWa8m0HjK/Rle81YHwz63Xh2DCMQ++zMyh9O+fpQg94tZGv2WJ8WSrfMGF8x5rXRe9Qmg/OE/cYX7mVb91nfI+LfPU245tb+UbQ23ZXmmtTKM0350mhSj0X8hVnxrdM5btB5fKhNId3KM1vzmPnjK9dl+/yYHz9F/m2JeNbxPIdOtDbESnNR8NQKi5xht1y79usDMXBd31gMPa+rTqc8MidIxHk3MEUmeVOumjk3OgQrSs3i0Syd3Qav6LnMUYbIpoYQXWYBg3Zsso4ewdyZRy8VFaHHlyGoaYIwaogx5LWNTrntP/pjM/scxKz31D7xMBfedczVj9DGfMT+qWsMUvRi7m5Lfrr34zT9VNgD3swknFhMKY1/XPgWHad+zQkySIzFRUVf41vKdVQ6T8ZiacAAAAASUVORK5CYII=' mode='aspectFit' class='back-home-return'></image>
<image wx:else src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAkFBMVEUAAAAzMzMzMzM1NTU6Ojo/Pz8zMzMzMzNEREQzMzMzMzM0NDRnZ2czMzMzMzMzMzMzMzM0NDQ0NDQ0NDQ2NjY3Nzf///8zMzMzMzMzMzMzMzMzMzMzMzM0NDQ0NDQzMzM0NDQ1NTU9PT0zMzMzMzMzMzMzMzM0NDQzMzM3Nzc3Nzc0NDQzMzM0NDQ2NjYzMzP3PMnqAAAAL3RSTlMA+vErDwj2sATs3TYC5uHQuU09MSETAdfJvaWak4J4ZEZCC8OgjGlgVRwYh3JaJmpD+NcAAAFhSURBVFjD7ZdbjoJAFAUbfKEIylsFBRREHbX3v7sxfTtxA/Uxk1ALqB8qtw9qZGTkfzBrEtQXB1p3oK929IcJpVtXWpPC6VZ825zxTVbiO8wYX+SK76QYTqJzI6i+g/hW0Pe478S3zxifH4iv8hjfMDc65wrV3GvDMmZr3qSM712Ib3FmfI2t+ZgzvqdjdPMbVHOnDSF0Uh+25suDrbmDjsvL1vyEav6xx6WBal6Ir3gzvtTWvJ0yvnYpvn7N+Bpb80C9baHxBb6CqOW43BVFb279TGGU5lqtOeHAFSOcQ+7BFHyXe9KFSciNDiG7cLNI8EpN13h1vo8xeiGcGjOmBTlo5Mqik0veAbrx15xu3A/IKSKvPTmWZF2jc072P9145H4nMfsPVWKNZ3s7xLDGvQqcikINjlkhXtKNpxvb+BR7D+352XmUMT+KsVUYN3N+EsWRfBovFYnX+mpkZOSv8Qvxhkf6bCYPxwAAAABJRU5ErkJggg==' mode='aspectFit' class='back-home-return'></image>
</view>
<view class="line" wx:if='{{navibarData.showBack && navibarData.showCapsule}}'></view>
<view class="title-bar-icon" bindtap='_backhome' wx:if='{{navibarData.showCapsule}}'>
<image wx:if="{{navibarData.bgTransparent&&navibarData.iconColor == 'white'}}" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAXVBMVEUAAAD///9RKvvlAAAAHnRSTlMA9kNVhvo95i4VAuzgsHxjWhwH0Me9uaugcE82JiScUXyNAAABNElEQVRYw+3Wx3KEMBBF0YYZRYY4Oen/P9MuyviBEVNluhcOuuuno21T6tfW3e+dIOfOKgR1dlJeXoS+IhfysvBRlst6EPkeRFkPIt+DKOtB5HsQZT2IfA8i1+OL8PgiPDkRHl+EJyfC44vw5ER4fBGenAiPL8KTE+HxRXhyIjy+CE9OhMcX4cmJ8PgiPElRw1sr6rHnTWBnPKE2CNQS8ju+t/M0yh6Ki67WWpW+FAdLszZrwU3/PIEJ/O+gKrfvlUoKNJb6rBECm2HQCIFuGDghEIsEJvDvgAYL8z0wj89PWJzii5zitfF5jUW9eNXEO0Zvlg6DLnoDHWmpZzZfK02jtJovsictVqvZ+kaTbrM/VU0vsvvpunzQlx7ldLG39DKvr9uhqnEUyTXV5+SqPaVSP683QHRHUsVUZh0AAAAASUVORK5CYII=' mode='aspectFit' class='back-home'></image>
<image wx:else src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAXVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC5BxTwAAAAHnRSTlMA9kNVhvo95i4VAuzgsHxjWhwH0Me9uaugcE82JiScUXyNAAABNElEQVRYw+3Wx3KEMBBF0YYZRYY4Oen/P9MuyviBEVNluhcOuuuno21T6tfW3e+dIOfOKgR1dlJeXoS+IhfysvBRlst6EPkeRFkPIt+DKOtB5HsQZT2IfA8i1+OL8PgiPDkRHl+EJyfC44vw5ER4fBGenAiPL8KTE+HxRXhyIjy+CE9OhMcX4cmJ8PgiPElRw1sr6rHnTWBnPKE2CNQS8ju+t/M0yh6Ki67WWpW+FAdLszZrwU3/PIEJ/O+gKrfvlUoKNJb6rBECm2HQCIFuGDghEIsEJvDvgAYL8z0wj89PWJzii5zitfF5jUW9eNXEO0Zvlg6DLnoDHWmpZzZfK02jtJovsictVqvZ+kaTbrM/VU0vsvvpunzQlx7ldLG39DKvr9uhqnEUyTXV5+SqPaVSP683QHRHUsVUZh0AAAAASUVORK5CYII=' mode='aspectFit' class='back-home'></image>
</view>
</view>
<view style="flex-grow:1;height:100%;background-color: transparent; display: flex; justify-content:{{navibarData.iconData.align?(navibarData.iconData.align==='right'?'flex-end':'flex-start'):'flex-start'}};">
<view style="display: flex;align-items: center;height: 100%;">
</view>
</view>
<view style="width:{{menuButtonInfo.width}}px;height:100%;background-color: transparent;"></view>
<view class='nav-titleContainer'>
<view wx:if="{{navibarData.bgTransparent}}" class="nav-title" style="color:{{navibarData.titleColor}}">{{navibarData.title}}</view>
<view wx:else class="nav-title">{{navibarData.title}}</view>
</view>
</view>
</template>
component/navbar.wxss
/* 頂部要固定定位 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
z-index: 99;
background: #ffffff;
}
/* 標(biāo)題要居中 */
.nav-titleContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
pointer-events: none;
}
.nav-title {
margin: 0 180rpx;
text-align: center;
/* width: 50%; */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 36rpx;
color: #000000;
font-weight: 600;
z-index: -1;
}
.back-home {
width: 40rpx;
height: 40rpx;
cursor: pointer;
}
.back-home-return {
width: 40rpx;
height: 40rpx;
cursor: pointer;
}
.title-bar-group {
border: 1rpx solid rgba(255,255,255,0.25);
background: rgba(0,0,0,0.12);
border-radius: 32rpx;
display: flex;
height: 64rpx;
width: 174rpx;
box-sizing: border-box;
align-items:center;
overflow: hidden;
}
.title-bar-group.only-group-icon {
border: none;
background: transparent;
width: 87rpx;
}
.title-bar-group.no-group-icon {
border: none;
background: transparent;
width: 0rpx;
}
.title-bar-group.no-group-icon + .nav-titleContainer {
justify-content:flex-start;
}
.title-bar-group.no-group-icon + .nav-titleContainer .nav-title {
margin: 0 180rpx 0 12rpx;
text-align:left;
}
.title-bar-icon {
flex: auto;
display:flex;
align-items:center;
justify-content:center;
height:100%;
}
.line{
height: 38rpx;
border-left: 1px solid rgba(255,255,255,0.12);
}
.title-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20rpx;
position: relative;
}
.b-nav-wrap.nav-wrap {
background: #fff;
}
.b-nav-wrap .nav-title {
color: #111;
}
.b-nav-wrap .title-bar-group {
border: 1rpx solid rgba(0,0,0,0.12);
background: #ffffff;
}
.b-nav-wrap .line{
border-left: 1px solid rgba(0,0,0,0.12);
}
.b-nav-wrap .title-bar-group.only-group-icon {
border: none;
background: transparent;
width: 87rpx;
}
.b-nav-wrap .title-bar-group.no-group-icon {
border: none;
background: transparent;
width: 0rpx;
}
.b-nav-wrap.nav-wrap.transparent-bg,
.b-nav-wrap.nav-wrap.transparent-bg .title-bar-group {
background: transparent;
}
6. 原理分析
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-802426.html
wx.getSystemInfoSync(); // 獲取到狀態(tài)欄的信息wx.getMenuButtonBoundingClientRect(); // 獲取膠囊的信息文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802426.html
function getStatusBarHeight() {
let res = wx.getSystemInfoSync()
let customTitleBarHeight;
try {
const menuInfo = wx.getMenuButtonBoundingClientRect(); // 獲取膠囊的信息
if (equalVersion(res.version, "7.0.3")) {
customTitleBarHeight =
menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2;
} else {
customTitleBarHeight = menuInfo.height + menuInfo.top * 2;
}
} catch (e) {
customTitleBarHeight = 48;
}
if (res.model.indexOf("iPhone") !== -1) {
customTitleBarHeight = 44;
}
return {
statusBarHeight: res.statusBarHeight, // 狀態(tài)欄的高度
titleBarHeight: customTitleBarHeight, // title的高度
}
};
到了這里，關(guān)于小程序自定義導(dǎo)航自適應(yīng)組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[自定義 Vue 組件] 小尾巴頂部導(dǎo)航欄(2.0) TailTopNav](https://imgs.yssmx.com/Uploads/2024/02/745101-1.png)
