微信小程序頂部自定義如何實現(xiàn),小程序自定義頂部導(dǎo)航欄的開發(fā)

對于小程序頂部及頭部的自定義，也就是小程序頁面的導(dǎo)航欄自定義，我們要如何做呢，下面為大家解答。

那么如何自定義頭部呢? 通過在app.js中設(shè)置navigationStyle屬性，默認值為‘default’，自定義為‘custom’。

默認頭部樣式展示如下：

自定義頭部樣式展示如下：

可以看到自定義頭部樣式時，頭部只保留膠囊，其他部分可以自己實現(xiàn)。

視頻層級問題：

場景：頁面中存在video標簽，同時會存在彈框，并且頁面底部有fixed在底部的按鈕，這兩部分不允許video覆蓋。

解決方案：官方給出的覆蓋video組件的方式是，通過cover-view，但由于cover-view對樣式的支持不足及自身的問題(見上文)，因此我們不使用cover-view處理。處理方式是使用圖片和video交替展示的方式，初始化展示為一張圖片，當點擊播放時切換video組件進行展示。頁面滾動，以及彈框出現(xiàn)的時候，將視頻組件隱藏，注意是隱藏，通過hidden屬性隱藏，而不是wx:if直接干掉，因為視頻播放中途暫停，下次播放需要從上次結(jié)束的位置開始播放，如果使用wx:if則無疑增加了實現(xiàn)的難度。

總結(jié)：

本文從框架、api、組件、應(yīng)用四個方面入手，說明在開發(fā)過程中遇到的問題，問題分析相對淺顯，但是比較實用。希望可以對讀者提供些許幫助。同時面對小程序時的心態(tài)已由最初的“純粹的api編程”到心懷敬畏之情。看似簡單的表象下，會存在這一系列棘手的情況。在此處做下總結(jié)，歡迎各位拍磚指正!