本文小編為大家詳細(xì)介紹“微信小程序怎么實(shí)現(xiàn)自定義頂部導(dǎo)航功能”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序怎么實(shí)現(xiàn)自定義頂部導(dǎo)航功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的田東網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

具備基礎(chǔ)

vue框架

mpvue框架

全局配置

?找到全局的app.json文件，在配置中添加如下內(nèi)容：

"navigationStyle": "custom"
"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black",
 "navigationStyle": "custom" // 這個(gè)配置
}

組件思維

?使用mpvue開(kāi)發(fā)小程序，src目錄下默認(rèn)會(huì)生成一個(gè)components文件夾；
?由于自定義組件所有webview頁(yè)面都要使用，所以把它歸類為公共組件；
?可以在components文件夾下新建一個(gè)common文件夾，專門(mén)放置公共組件，如下：

├── src                    源碼目錄 
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          組件目錄
│  │  └── common           公共組件
          └── topBar.vue   頂部自定義導(dǎo)航復(fù)制代碼

組件內(nèi)容

?由于不同設(shè)備statusBarHeight值可能有差異，自定義組件的高度取決于statusBarHeight值；
?找到全局App.vue文件，在這里面執(zhí)行小程序的onLaunch生命周期（監(jiān)聽(tīng)小程序初始化）；
?具體獲取方法如下：

const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)

? 通過(guò)vuex存儲(chǔ)statusBarHeight值，不清楚vuex如何在小程序中使用的可參考mpvue如何使用vuex；
?.vue文件的html相關(guān)結(jié)構(gòu)如下：

?結(jié)構(gòu)分析如下，可看做兩部分，一部分是fixed定位在頂部的class="bar"的div;另一部分是class="place-holder"的p；
?之所以要放一個(gè)p標(biāo)簽，是因?yàn)椴挥妹看我雝opBar.vue時(shí)都要考慮class="bar"的div都會(huì)遮擋內(nèi)容區(qū)的問(wèn)題；
?因此將p標(biāo)簽height:80rpx;加上padding-top的6px;正好等于class="bar"的div的高度；

?由于項(xiàng)目中左邊放置的是進(jìn)入個(gè)人中心的功能，所以左邊頭像必須使用button來(lái)出發(fā)獲取用戶信息的授權(quán)；
?同時(shí)需要考慮到左邊不是頭像的情況，這時(shí)就可以用到vue的props屬性，具體props值，看下面代碼，默認(rèn)是給向左的箭頭，表示返回上一頁(yè)；

props: {
 title: {
 type: String,
 required: true
 },
 icon: {
 type: String,
 default: require('@static/icon/icon_back.png')
 },
 way: {
 type: String,
 default: null
 }
}

?如果way啥也不傳則左側(cè)不顯示任何icon；
?如果way傳入的是進(jìn)入個(gè)人中心的路由，則走button結(jié)構(gòu)上面的事件；
?如果way傳入的是‘back'，則顯示返回的向左箭頭。

讀到這里，這篇“微信小程序怎么實(shí)現(xiàn)自定義頂部導(dǎo)航功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。