微信小程序自定義導航欄

微信小程序自定義導航欄

開發微信小程序的時候有些功能時很特殊的,比如我需要在導航欄上添加返回上一頁和首頁的功能時現有的就不能滿足了,好在小程序開發了這個功能使得大家可以自定義來實現這一功能,那麼具體需要實現一個什麼樣的功能呢,我們先看看知乎小程序的的例子:

微信小程序自定義導航欄

有圖就好辦了,那麼下面我們就來一步步實現這個功能。

一、首先添加一個組件如下:

微信小程序自定義導航欄

關鍵代碼:

微信小程序自定義導航欄

微信小程序自定義導航欄

這樣我們才算註冊了一個組件。

二、實現如知乎那樣的結構和樣式

微信小程序自定義導航欄

結構代碼,裡面是已經寫好了的結構和一些數值後面會做介紹

微信小程序自定義導航欄

微信小程序自定義導航欄

微信小程序自定義導航欄

樣式部分

三、關鍵代碼實現

首先需要在組件中註冊生命週期函數attached來計算狀態欄,導航欄等等的高度如下:

微信小程序自定義導航欄

組件需要傳遞的屬性:

微信小程序自定義導航欄

點擊返回和主頁按鈕事件如下:

微信小程序自定義導航欄

這裡要特別注意的是目前是針對首頁不是tabbar頁面,如果是則修改為switchtab的api才可以。

四、組件的使用

微信小程序自定義導航欄

wxml中使用組件來顯示

微信小程序自定義導航欄

首頁標題已經可以了,但是沒有兩個按鈕,那麼我們添加代碼跳轉到其他頁面看看,其他頁面比需要和上面的首頁一樣的操作才可以

微信小程序自定義導航欄

到這裡已經可以了,但是我們還需要看看分享頁是不是好的,添加編譯模式為分享,然後看看效果

微信小程序自定義導航欄

效果也出來了,只是樣式有點不好,沒關係大家可以自行修改下樣式即可。

微信小程序自定義導航欄
微信小程序自定義導航欄


分享到:


相關文章: