微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄

更新時間：2022年04月07日 12:42:52 作者：Upward?Force

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下

1、要實(shí)現(xiàn)自定義導(dǎo)航欄，首先得在全局進(jìn)行相關(guān)配置

app.json頁面

"window": {
? ? ...
? ? "navigationStyle": "custom"
},

根據(jù)微信小程序官方文檔的說法，只有客戶端7.0.0以上版本才支持局部頁面實(shí)現(xiàn)自定義導(dǎo)航欄，7.0.0以下版本只支持全體頁面的自定義導(dǎo)航欄，自己項目里采用的是就是這種

app.js頁面

App({
? onLaunch: function(options) {
? ? var _this = this;
? ??
? ? //自定義導(dǎo)航欄 獲取設(shè)備頂部窗口的高度（不同設(shè)備窗口高度不一樣，根據(jù)這個來設(shè)置自定義導(dǎo)航欄的高度）
? ? wx.getSystemInfo({
? ? ? success: (res) => {
? ? ? ? // 基礎(chǔ)庫 2.1.0 開始支持wx.getMenuButtonBoundingClientRect()，低版本需要適配
? ? ? ? let custom = wx.getMenuButtonBoundingClientRect()
? ? ? ? // console.log('狀態(tài)欄高度',res.statusBarHeight)
? ? ? ? // console.log('右上角膠囊按鈕的高度', custom.height)
? ? ? ? // console.log('右上角膠囊按鈕的上邊界坐標(biāo)', custom.top)
? ? ? ? // console.log('右上角膠囊按鈕的下邊界坐標(biāo)', custom.bottom)
? ? ? ? _this.globalData.statusBarHeight = res.statusBarHeight
? ? ? ? _this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
? ? ? }
? ? })
? },

? globalData: { // 全局?jǐn)?shù)據(jù)
? ? statusBarHeight: 0,
? ? navBarHeight: 0,
? },
})

2、創(chuàng)建自定義導(dǎo)航欄組件，組件目錄為 /components/navbar

navbar.wxml頁面

<!-- 默認(rèn)為黑色的返回鍵-->
<view class='nav-wrap nav-bgc-class' style='height: {{statusBarHeight + navBarHeight}}px;'>
? <!-- ?左上角的返回按鈕 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，1為顯示，0為隱藏 -->
? <view class='nav-capsule' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'>
? ? <image class='back-pre ex-back-pre' src='{{navbarData.backSrc || "/img/back4.png"}}' mode='aspectFill'></image>
? </view>
? ? <!-- ?中間的標(biāo)題 -->
? <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;'>{{navbarData.title}}</view>
</view>

navbar.js頁面

const app = getApp()
Component({
? // multipleSlots 為組件開啟多插槽模式
? options: {
? ? multipleSlots: true,
? },
? // externalClasses 為組件指定多個外部樣式類
? externalClasses: ['nav-bgc-class', 'nav-title-class','ex-back-pre'],
? // properties 組件用來儲存外部數(shù)據(jù)
? properties: {
? ? navbarData: { //navbarData ? 由父頁面?zhèn)鬟f的數(shù)據(jù)，變量名字自命名
? ? ? type: Object,
? ? ? value: {},
? ? ? observer: function (newVal, oldVal) { }
? ? },
? },
? // 組件用來儲存內(nèi)部私有數(shù)據(jù)
? data: {
? ? // 自定義導(dǎo)航欄的高度
? ? statusBarHeight: app.globalData.statusBarHeight,
? ? navBarHeight: app.globalData.navBarHeight
? },
? // attached函數(shù) 當(dāng)組件進(jìn)入頁面節(jié)點(diǎn)樹時觸發(fā)，可以使用setData，絕大多數(shù)初始化工作在這個時機(jī)進(jìn)行
? attached: function () {},
? // methods對象 定義組件內(nèi)的各種方法
? methods: {
? ? // 返回鍵，觸發(fā)自定義事件，將返回的事件交給父級頁面來分情況定義
? ? _navback() {
? ? ? this.triggerEvent('goBack')
? ? }
? }
})

navbar.json頁面

{
? "component": true
}

navbar.wxss頁面

/* 頂部固定定位 ? 標(biāo)題要居中 ? 自定義按鈕和標(biāo)題要和右邊微信原生的膠囊上下對齊 */
.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);
}

/* 返回鍵 */
.nav-capsule {
? width: 140rpx;
? /* background-color: skyblue; */
? /* 讓里面的圖片元素垂直居中 */
? display: flex;
? align-items: center;
}

.back-pre {
? width: 100rpx;
? height: 68rpx;
? /* background-color: green; */
}

/* 標(biāo)題 */
.nav-title {
? position: absolute;
? left: 0;
? right: 0;
? bottom: 0;
? max-width: 400rpx;
? margin: auto;
? /* background-color: deeppink; */
? /* 水平垂直居中 */
? display: flex;
? align-items: center;
? justify-content: space-around;
? /* 超出部分省略號顯示 */
? overflow: hidden;
? text-overflow: ellipsis;
? white-space: nowrap;
? /* 字體設(shè)置 */
? color: #111111;
? font-size: 32rpx;
? font-weight: 500;
}

3、在其它頁面使用自定義導(dǎo)航欄組件（需要修改默認(rèn)樣式）

transation_detail.json頁面

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

transation_detail.wxml頁面

<!-- 引入自定義導(dǎo)航欄組件 -->
<nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'>
</nav-bar>

transation_detail.wxss頁面

/* 需要從外部傳入導(dǎo)航欄組件的樣式 */

/* 導(dǎo)航欄背景色 */

.ex-nav-bgc-class {
? background: transparent !important;
}

/* 導(dǎo)航欄標(biāo)題顏色 */

.ex-nav-title-class {
? color: #fff !important;
}

/* 導(dǎo)航欄返回鍵樣式 */
.ex-back-pre {
? width: 60rpx!important;
? height: 60rpx!important;
? margin-top: 4rpx!important;
? padding: 40rpx!important;
}

transation_detail.js頁面

const app = getApp()
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 自定義導(dǎo)航欄需要的參數(shù)
? ? nvabarData: {
? ? ? showCapsule: 1, //是否顯示左上角圖標(biāo) ? 1表示顯示 ? ?0表示不顯示
? ? ? title: '', //導(dǎo)航欄 中間的標(biāo)題
? ? ? backSrc: '/img/back3.png'?? ?// 返回鍵的樣式
? ? },
? ? // 此頁面 頁面內(nèi)容距最頂部的距離
? ? height: app.globalData.statusBarHeight + app.globalData.navBarHeight,
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {},
??
? // 點(diǎn)擊 頂部返回鍵時 要返回的頁面
? _goBack() {
? ? wx.switchTab({
? ? ? url: '/pages/mer_index/mer_index',
? ? })
? },
})

4、自定義導(dǎo)航欄可以不傳樣式，這時會采用默認(rèn)樣式

order.wxml頁面

<!-- 引入自定義導(dǎo)航欄組件 -->
<nav-bar bind:goBack="_goBack" navbar-data='{{nvabarData}}'></nav-bar>

order.js頁面

const app = getApp()
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 自定義導(dǎo)航欄需要的參數(shù)
? ? nvabarData: {
? ? ? showCapsule: 1, //是否顯示左上角圖標(biāo) ? 1表示顯示 ? ?0表示不顯示
? ? ? title: '現(xiàn)有倉單', //導(dǎo)航欄 中間的標(biāo)題
? ? },
? ? // 此頁面 頁面內(nèi)容距最頂部的距離
height: app.globalData.statusBarHeight + app.globalData.navBarHeight,

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: