小程序圆角设计及position: fixed 适应安卓手机--电柜详情--随笔记录

2021-11-26 08:39:07

十年河东，十年河西，莫欺少钱穷

学无止境，精益求精

个人是个二把手，随笔记录，用于记录学习，供以后参考用。

先上效果图

需要说明的是，鄙人的导航栏自定义了，感兴趣的童鞋，可参考鄙人博客：微信小程序自定义导航栏

先看自定义导航栏部分，设置页面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函数获取底部横条的高度，自动适应苹果和安卓手机 */
}

以上便是鄙人的随笔记录，不喜勿喷

@陈大六的博客

码农公寓

相关文章