這篇文章將為大家詳細(xì)講解有關(guān)使用uni app怎么實現(xiàn)微信頂部導(dǎo)航條功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為張北企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、成都做網(wǎng)站，張北網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

在page.json里配置app-plus即可

{
 "path": "pages/ucenter/index",
 "style": {
 "navigationBarTitleText": "我的",
 "app-plus": {
  "titleNView": {
  "buttons": [
   {
   "text": "\ue670",
   "fontSrc": "/static/iconfont.ttf",
   "fontSize": "22px",
   "float": "left"
   },
   {
   "text": "\ue62c",
   "fontSrc": "/static/iconfont.ttf",
   "fontSize": "22px"
   }
  ],
  "searchInput":{
   ...
  }
  }
 }
 }
},

對于如何監(jiān)聽按鈕、輸入框事件，uni-app給出了相應(yīng)API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，寫在響應(yīng)的頁面中即可。

 那如何可以實現(xiàn)像京東、淘寶、微信頂部導(dǎo)航欄，如加入城市定位、搜索、自定圖片/圖標(biāo)、圓點提示。。。

上面的方法是可以滿足一般項目需求，但是在小程序里則失效了，而且一些復(fù)雜的導(dǎo)航欄就不能很好兼顧，這時只能尋求其它替代方法了

將navigationStyle設(shè)為custom或titleNView設(shè)為false時，原生導(dǎo)航欄不顯示，這時就能自定義導(dǎo)航欄

"globalStyle": { "navigationStyle": "custom" }

下面是簡單測試實例：

這里要注意的是，H5、小程序、App端狀態(tài)欄都不一樣，需要重新計算處理，我這里已經(jīng)處理好了，可直接使用，在App.vue里面設(shè)置即可

onLaunch: function() {
 uni.getSystemInfo({
 success:function(e){
  Vue.prototype.statusBar = e.statusBarHeight
  // #ifndef MP
  if(e.platform == 'android') {
  Vue.prototype.customBar = e.statusBarHeight + 50
  }else {
  Vue.prototype.customBar = e.statusBarHeight + 45
  }
  // #endif
  
  // #ifdef MP-WEIXIN
  let custom = wx.getMenuButtonBoundingClientRect()
  Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
  // #endif
  
  // #ifdef MP-ALIPAY
  Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
  // #endif
 }
 })
},

嘖嘖嘖，看下面的效果，是不是覺得很眼熟，沒錯，就是基于uni-app簡單的實現(xiàn)了一個仿微信頂部導(dǎo)航條

頂部的圖標(biāo)使用iconfont字體圖標(biāo)、另外還可自定傳入圖片

 
 
 


 
 
 添加好友

 
 
 添加好友

支持傳入的屬性，另外還用到了vue插槽slot

/***
　　isBack    是否返回按鈕
　　title    標(biāo)題
　　titleTintColor  標(biāo)題顏色
　　bgColor    背景
　　center    標(biāo)題居中
　　search    搜索條
　　searchRadius  圓形搜索條
　　fixed    是否固定
*/

關(guān)于使用uni app怎么實現(xiàn)微信頂部導(dǎo)航條功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。