小程式相容全面屏自定義底部按鈕

2022-06-11 03:09:12 字數 364 閱讀 3872

如果你的小程式頁面按鈕有用fixed定位到底部的話,那你一定會遇到相容全面屏的坑(與底部橫條重疊)。查了下文件,發現能用的就只有乙個api:

不過蛋疼的是這個api並沒有提供類似安全距離這樣的資料,只提供了以下可能用得到資料:

研究了下發現只能曲線救國了:

上**:

export function

$checkfullsucreen () })}

(上面的taro是京東小程式的框架,這邊自己封裝到乙個檔案中匯出,如果你不知道的話)

(46則是小程式頂部title區域測出的大概高度)

根據上面的方法判斷出全面屏後,可以給相應的頁面增加底部padding或margin就可以了 

iphoneX相容之自定義底部選單

當我們需要自定義底部導航欄時 首先要解決iphonex的底部大橫條對這個相容 通常不設定相容 都會被擋住 使用css編寫即可相容 無需編寫js 在你要編寫的底部選單中插入 樣式padding bottom calc env safe area inset bottom 2 即可相容 例如 css中插...

微信小程式自定義底部導航tabBar

custom tab bar資料夾要與pages檔案同級,custom tab bar之下的檔案名字為index 官方文件推薦用 fixed 在底部的 cover view cover image 元件渲染樣式,以保證 tabbar 層級相對較高。但是我是在真機除錯時遇到tabbar偶爾消失的bug...

微信小程式如何自定義底部導航

先看一下自定義底部導航 圖1 和未自定義的導航 圖2 效果差距 圖1 圖2如何實現自定義底部導航 建立乙個與pages同級的資料夾,名稱為custom tab bar資料夾名字是規定好的只能叫做這個。建立好這個資料夾之後就是編寫底部導航的內容 5.完成到上一步之後已經可以實現頁面的切換效果了,但是頁...