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

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

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

默認(rèn)頭部樣式展示如下：

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

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

視頻層級(jí)問(wèn)題：

場(chǎng)景：頁(yè)面中存在video標(biāo)簽，同時(shí)會(huì)存在彈框，并且頁(yè)面底部有fixed在底部的按鈕，這兩部分不允許video覆蓋。

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

總結(jié)：

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