微信小程式(一)自定義導航欄和fixed失效及各機型相容問題

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第2天,點選檢視活動詳情

前言

相信掘友們應該或多或少都開發過微信小程式,微信小程式的寫法雖然和vue有很多類似的地方,但又有很多vue屬性,在小程式中沒有類似的實現,比如計算屬性,watch 監聽等;
因為小程式是附著在微信 app 上,所以經常要處理一些安卓端和蘋果端的相容,比如有些蘋果機螢幕下方有安全區域,一些安卓機上點輸入框輸入完畢後點完成按鈕鍵盤不能自動收回,導致輸入框不能失去焦點的問題,等等...
為了以後自己和掘友們不再浪費踩坑的時間,我打算寫一些文章記錄一下我在開發微信小程式中遇到的一些坑和一些小功能的實現過程。

目錄:

cover-view 元件使用 fixed 樣式失效問題

背景

因專案需求,要開發一個自定義 tabBar,在微信官方文件找到一個demo,官方demo看到 tabBar 元件是用基礎元件 cover-viewcover-image 構建的架子,用 positionfixed 固定定位在手機螢幕最下方,用真機除錯是發現 tabBar 元件並不一定會固定在螢幕的最下方,而且如果頁面滑動,用 fixed 固定的區域會上下移動

15ab988433e981434a1596d7e8e681b.jpg

官方demo 示例程式碼

原因:

在微信社群找相關問題發現是 cover-view 的原因,然後這個問題直到現在好像還沒修復 image.png

解決方案

改用 viewimage 基礎元件構建架子就可以了

自定義導航欄、狀態列在不同機型的適配

背景原因

因為不同機型的導航欄和膠囊距上下間距不同,導致自定義的導航欄的高度不能固定。需求是導航欄的文字要和膠囊對齊。

解絕方案

廢話不多說了,直接上程式碼,後面有解釋說明: javascript /* 獲取膠囊的位置和手機狀態列的資訊 */ async getMenuInfo() { let { top, height } = wx.getMenuButtonBoundingClientRect(); let statusBarHeight = ""; wx.getSystemInfo({ success(res) { statusBarHeight = res.statusBarHeight } }) this.setData({ topParams: { top, height, statusBarHeight }, }) }, 通過 wx.getMenuButtonBoundingClientRect() 獲取選單按鈕(右上角膠囊按鈕)的佈局位置資訊。座標資訊以螢幕左上角為原點。
獲取的引數解釋: * top 是上邊界座標,也就是膠囊距離螢幕頂部的距離,單位:px * height 是膠囊高度,單位:px * 然後通過 wx.getSystemInfo() 獲取狀態列的高度statusBarHeight,單位px;
* 綜上所述可知 膠囊距離狀態列的距離 = 膠囊距離螢幕頂部的距離(top) - 狀態列的高度(statusBarHeight)
通過這些引數你就可以寫出自己想要的各種自定義導航欄的樣式了。

參考文件:
wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo()

寫在最後

我是 AndyHu,目前暫時是一枚前端搬磚工程師。

文中如有錯誤,歡迎在評論區指正,如果這篇文章幫到了你,歡迎點贊和關注呀😊

未經許可禁止轉載💌

speak less,do more.