1:沉浸式
開發過小程序的童鞋應該都知道我們可以在pages.json里配置頁面的頭部,且不會有沉浸式的問題。什么是沉浸式?我個人理解就是設備的狀態欄不存在與文檔流中,遮擋了我們頁面的頭部。
然而很多項目都是需要自定義頭部的,個人的建議是分化出一個組件來解決沉浸式,這樣比較容易修改。
首先項目啟動時,頁面應該通過 uni.getSystemInfoSync().statusBarHeight 來獲取當前狀態欄的高度,然后在頁面的最頂部自定義一個占位標簽,將其高度與獲取的狀態欄高度進行雙向綁定
<view class="uni-status-bar" :style="{ height: statusBarHeight +'px'}">
2:單位
uniapp框架的單位是upx,其實和微信的rpx是沒有區別的,但是在這次的項目里有個簡歷的完善度,需要從后台獲取簡歷完善的百分比計算得到進度條的寬度,進行雙向綁定
計算出來的結果是沒有問題的,PC端調試也是沒有問題的,但是移動設備上調試就出現問題了,寬度設置不上
經過排查原來是單位的問題,原先是 <view class="loading-item" :style="{width:loadingwidth+'upx'}"></view>
但是移動端的便簽是不解析upx的,我們style里的upx單位uniapp會裝換成px的,所以正確的寫法是:
主要就是要通過uni.upx2px轉化下,標簽里拼接的單位是PX
3:二級,三級聯動(待寫。。。)