小程式圓角設計及position: fixed 適應安卓手機--電櫃詳情--隨筆記錄
阿新 • • 發佈：2021-12-06
十年河東，十年河西，莫欺少錢窮
學無止境，精益求精
個人是個二把手，隨筆記錄，用於記錄學習 ，供以後參考用。
先上效果圖
需要說明的是，鄙人的導航欄自定義了，感興趣的童鞋，可參考鄙人部落格：微信小程式自定義導航欄
先看自定義導航欄部分，設定頁面json檔案如下：
{
"usingComponents": {
"reback-bar":"../../../../component/otherNavigationBar/otherNavigationBar"
},
"navigationStyle": "custom",
"enablePullDownRefresh": true,
"backgroundColor": "#f5f8fb",
"backgroundTextStyle": "dark",
"navigationBarTextStyle":"white"
}
navigationStyle ：宣告自定義導航欄
enablePullDownRefresh：是否啟動下拉重新整理
backgroundColor：導航欄背景色
backgroundTextStyle：下拉loading 樣式
navigationBarTextStyle：導航欄標題顏色，僅支援black或white然後頁面程式碼
<reback-bar backImg="reback-white" backgroundColor="#0DD0D0" color="#FFFFFF" innerText="電櫃詳情" isShare="1"> </reback-bar> <view class="boxbig"> <view class="boxsmall"> </view> </view> <view class="cabinetBox"> <view class="cabinetno"> 11111021011112272 </view> <view class="site"> 潮州萬花公寓(潮安區庵埠鎮文裡村玉石街) </view> </view> <view class="portBox"> <view class="imageBox"> <image class="imagecls" src="{{imgUrl}}/battery/soc100.png" mode="widthFix"></image> </view> <view class="textBox"> <view class="textBoxTxt">電櫃倉位：1號倉</view> <view class="textBoxTxt">電池編碼：6353221090100646</view> <view class="textBoxTxt">電池電量：100%</view> </view> </view> <view class="portBox"> <view class="imageBox"> <image class="imagecls" src="{{imgUrl}}/battery/soc35_50.png" mode="widthFix"></image> </view> <view class="textBox"> <view class="textBoxTxt">電櫃倉位：2號倉</view> <view class="textBoxTxt">電池編碼：6353221090100646</view> <view class="textBoxTxt">電池電量：45%</view> </view> </view> <view class="portBox"> <view class="imageBox"> <image class="imagecls" src="{{imgUrl}}/battery/nobattery.png" mode="widthFix"></image> </view> <view class="textBox"> <view class="textBoxTxt"> 電櫃倉位：3號倉 <view class="redtxt">（空倉）</view> </view> <view class="textBoxTxt">電池編碼：</view> <view class="textBoxTxt">電池電量：</view> </view> </view> <view class="portBox"> <view class="imageBox"> <image class="imagecls" src="{{imgUrl}}/battery/soc50_74.png" mode="widthFix"></image> </view> <view class="textBox"> <view class="textBoxTxt">電櫃倉位：4號倉</view> <view class="textBoxTxt">電池編碼：6353221090100646</view> <view class="textBoxTxt">電池電量：70%</view> </view> </view> <view class="botbox"> <view class="bottomBox"> <view class="qxbtn"> 取消 </view> <view class="hdbtn"> 開始換電 </view> </view> </view> <view style="height: 101rpx;"></view>
最後樣式
/* pages/pages/battery/changescan/changescan.wxss */ page { background-color: #F5F9FB; overflow-x: hidden; } .boxbig { height: 50rpx; background-color: #0DD0D0; /*這是less的寫法 使用了變數*/ padding: 0 18rpx; /*注意，這裡用的是 rpx*/ } .boxsmall { height: 100%; width: 100%; background-color: #fff; border-top-left-radius: 18rpx; border-top-right-radius: 18rpx; } .cabinetBox { height: 132rpx; width: calc(750rpx - 36rpx); margin-left: 18rpx; display: flex; flex-direction: column; align-items: center; background-color: #fff; } .cabinetno { color: #272B37; font-family: Roboto; font-size: 32rpx; font-weight: 600; } .site { color: #6A6D7E; font-family: Roboto; font-size: 28rpx; } .portBox { height: 252rpx; width: calc(750rpx - 36rpx); margin-left: 18rpx; display: flex; background-color: #fff; margin-top: 20rpx; } .imageBox { height: 100%; flex: 2; background-color: #fff; display: flex; justify-content: center; align-items: center; } .imagecls { width: 96rpx; } .textBox { flex: 8; background-color: #fff; display: flex; flex-direction: column; justify-content: center; } .textBoxTxt { font-size: 26rpx; color: #272B37; font-family: PingFangSC; height: 50rpx; line-height: 50rpx; margin-left: 72rpx; } .redtxt { color: #FF0000; font-size: 26rpx; font-weight: 600; display: inline; font-family: PingFangSC; } .botbox { background-color: #fff; margin-top: 1rpx; height: 100rpx; width: 100%; z-index: 10000; position: fixed; bottom: 0; margin-bottom: 0; /* fiex 底部固定，通過CSS函式獲取底部橫條的高度，自動適應蘋果和安卓手機 */ margin-bottom: constant(safe-area-inset-bottom); /* fiex 底部固定，通過CSS函式獲取底部橫條的高度，自動適應蘋果和安卓手機 */ margin-bottom: env(safe-area-inset-bottom); /* fiex 底部固定，通過CSS函式獲取底部橫條的高度，自動適應蘋果和安卓手機 */ } .bottomBox { height: 100rpx; width: 100%; display: flex; } .qxbtn { flex: 45; color: #B1B8BE; text-align: center; line-height: 100rpx; font-size: 28rpx; font-weight: Regular; font-family: PingFangSC; } .hdbtn { flex: 55; text-align: center; line-height: 100rpx; background-color: #0DD0D0; font-size: 34rpx; color: #fff; font-weight: Medium; font-family: PingFangSC; }
樣式中，總結如下：
邊框的寬度會佔用總體寬度，因此，需要減去邊框的寬度，我通過計算的方式進行
width: calc(750rpx - 36rpx);
2、overflow-x: hidden; 防止左右超出部分出現橫向左右拉條
overflow-x: hidden;
3、position: fixed; 將元素通過定位的方式，固定在某個位置。注意：定位的元素，不佔用空間，因此需要在頁面上加上佔用位置的寬度/高度的元素，進行實際佔用
<!--/*定位元素空間填充*/--> <view style="height: 101rpx;"></view>
4、使用 position: fixed; 主要設定元素的寬度，及適配安卓系統
.botbox { background-color: #fff; margin-top: 1rpx; height: 100rpx; width: 100%; z-index: 10000; position: fixed; bottom: 0; margin-bottom: 0; /* fiex 底部固定，通過CSS函式獲取底部橫條的高度，自動適應蘋果和安卓手機 */ margin-bottom: constant(safe-area-inset-bottom); /* fiex 底部固定，通過CSS函式獲取底部橫條的高度，自動適應蘋果和安卓手機 */ margin-bottom: env(safe-area-inset-bottom); /* fiex 底部固定，通過CSS函式獲取底部橫條的高度，自動適應蘋果和安卓手機 */ }
以上便是鄙人的隨筆記錄，不喜勿噴
@陳大六的部落格
付婷，你還那麼胖嗎？如果胖，就減肥肥吧。