小程序自定義單頁面、全局導航欄的實現代碼

來源：懂視網責編：小采時間：2020-11-27 22:00:07

小程序自定義單頁面、全局導航欄的實現代碼

小程序自定義單頁面、全局導航欄的實現代碼:需求產品說小程序返回到首頁不太方便，想添加返回首頁按鈕，UI說導航欄能不能設置背景圖片，因為那樣設計挺好看的。需求分析并制定方案這產品和UI都提需求了，咱也不能反駁哈，所以開始調研，分析可行性方案；1、可以添加懸浮按鈕。2、自定義導航欄。添

推薦度：

點擊下載本文 文檔為doc格式

導讀小程序自定義單頁面、全局導航欄的實現代碼:需求產品說小程序返回到首頁不太方便，想添加返回首頁按鈕，UI說導航欄能不能設置背景圖片，因為那樣設計挺好看的。需求分析并制定方案這產品和UI都提需求了，咱也不能反駁哈，所以開始調研，分析可行性方案；1、可以添加懸浮按鈕。2、自定義導航欄。添

二、實現的步驟

以下說下幾個要點：

1、自定義導航欄文本，是否顯示返回，是否顯示返回首頁,導航欄高度

2、statusBarHeight，用來獲取手機狀態欄的高度，這個需要在全局app.js中的onLaunch，調用wx.getSystemInfo獲取，navigationBarHeight+默認的高度，這個是設定整個導航欄的高度，

3、還有注意的，在寫樣式距離和大小時建議都用px，因小程序右邊的膠囊也是用的px，不是rpx。

4、因為自定義導航欄每個頁面都要寫，所以把導航欄封裝了公共組件，這樣只需要在每個頁面引入即可。

如下是封裝的導航欄組件：

wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
 <view style="{{'height: ' + statusBarHeight}}"></view>
 <view class='title-container'>
 <view class='capsule' wx:if="{{ back || home }}">
 <view bindtap='back' wx:if="{{back}}">
 <image src='/images/back.png'></image> 
 </view>
 <view bindtap='backHome' wx:if="{{home}}">
 <image src='/images/home.png'></image>
 </view>
 </view>
 <view class='title'>{{text}}</view>
 </view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>

這里有個需注意的問題，就是一般會出現自定義導航欄，下拉頁面，導航欄也隨著會下拉，這種問題是因為設置fixed后頁面元素整體上移了navigationBarHeight，所以在此組件里設置一個空白view元素占用最上面的navigationBarHeight這塊高度

wxss

.navbar {
 width: 100%;
 background-color: #1797eb;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
}
.title-container {
 height: 40px;
 display: flex;
 align-items: center;
 position: relative;
}
.capsule {
 margin-left: 10px;
 height: 30px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid #fff;
 border-radius: 16px;
 display: flex;
 align-items: center;
}
.capsule > view {
 width: 45px;
 height: 60%;
 position: relative;
.capsule > view:nth-child(2) {
 border-left: 1px solid #fff; 
}
.capsule image {
 width: 50%;
 height: 100%;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}
.title {
 color: white;
 position: absolute;
 top: 6px;
 left: 104px;
 right: 104px;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

const app = getApp()

Component({

 properties: {
 text: {
 type: String,
 value: 'Wechat'
 },
 back: {
 type: Boolean,
 value: false
 },
 home: {
 type: Boolean,
 value: false
 }
 },
 data: {
 statusBarHeight: app.globalData.statusBarHeight + 'px',
 navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
 },

 methods: {
 backHome: function () {
 let pages = getCurrentPages()
 wx.navigateBack({
 delta: pages.length
 })
 },
 back: function () {
 wx.navigateBack({
 delta: 1
 })
 }
 }
})

json

{
 "component": true,
 "usingComponents": {}
}

最終還需要考慮下版本兼容的問題，畢竟還有一些用戶，微信版本并沒有更新到最新版本。

首先可以在app.js里面獲取下當前用戶的微信版本，做下版本比較，如果小于這個版本，設置個全局變量，也可以在組件寫個方法，在不同的頁面打開顯示不同的頂部導航欄，或者可以控制是否顯示導航欄，這里就不詳細說了。

親自試了下，在低于7.0版本的微信中，如果采用單頁面自定義導航欄，會出現兩個導航欄，這時候通過判斷版本號不要再渲染自定義的導航欄組件了，在頁面的配置文件里寫上title名，還有相應的背景色，這樣就會顯示自帶的導航欄了。

總結

小程序開發是有些坑的地方，從不支持自定義導航欄，到支持全局自定義導航欄，再到現在的支持單頁面配置，可以看出在慢慢完善。還有底部tabbar，可自己選擇配置的太少了，雖然也支持自定義，但是發現自定義寫的底部導航組件體驗并不好，每次打開頁面都會重新渲染底部的按鈕，如果全部寫成在一個頁面里的tab切換，雖然按鈕每次不用重新加載了，但是業務多肯定不行，寫到一個單頁面里東西也太多了。希望微信能夠多添加或放開一些功能，讓開發者更好的服務于產品，給用戶更好的體驗。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com