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

2021/12/6 20:47:55

本文主要是介绍小程序圆角设计及position: fixed 适应安卓手机--电柜详情--随笔记录,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

学无止境,精益求精

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

先上效果图

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

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

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

@陈大六的博客



这篇关于小程序圆角设计及position: fixed 适应安卓手机--电柜详情--随笔记录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程