十年河东,十年河西,莫欺少钱穷
学无止境,精益求精
个人是个二把手,随笔记录,用于记录学习 ,供以后参考用。
先上效果图
需要说明的是,鄙人的导航栏自定义了,感兴趣的童鞋,可参考鄙人博客:微信小程序自定义导航栏
先看自定义导航栏部分,设置页面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函数获取底部横条的高度,自动适应苹果和安卓手机 */ }
以上便是鄙人的随笔记录,不喜勿喷
@陈大六的博客