微信小程序计算器简单界面实例

版权声明：可供读者学习参考使用 https://blog.csdn.net/weixin_40169642/article/details/82715587

闲着无聊自己搭建了一个计算器的简单界面

index.wxml

<view class='content' >

<view class='screen'>
0
</view>

<view class='btnGroup'>
<view class='item orange'>退格</view>
<view class='item orange'>清屏</view>
<view class='item orange'>+/-</view>
<view class='item orange'>+</view>
</view>

<view class='btnGroup'>
<view class='item orange'>9</view>
<view class='item orange'>8</view>
<view class='item orange'>7</view>
<view class='item orange'>-</view>
</view>

<view class='btnGroup'>
<view class='item orange'>6</view>
<view class='item orange'>5</view>
<view class='item orange'>4</view>
<view class='item orange'>x</view>
</view>

<view class='btnGroup'>
<view class='item orange'>3</view>
<view class='item orange'>2</view>
<view class='item orange'>1</view>
<view class='item orange'>÷</view>
</view>

<view class='btnGroup'>
<view class='item orange'>0</view>
<view class='item orange'>.</view>
<view class='item orange'>历史</view>
<view class='item orange'>=</view>
</view>

</view>

index.wxss

/* pages/index/index.wxss */
.content{
  width: 100%;
  height: 100%;
  display: flex;
  /* 布局下的组件垂直分布 */
  flex-direction: column;
  /* 内容居中 */
  align-items: center;
  box-sizing: border-box;
  background: black;
  /* 背景图是否平铺 */
  background-repeat: repeat;
  /* 距离顶部距离 */
  padding: 30rpx;
}
.screen{
  width: 720rpx;
  height: 100rpx;
  line-height: 100rpx;
  /* 距离右边的距离 */
  padding-right: 10rpx;
  /* 底部距离下一个布局的距离 */
  margin-bottom: 30rpx;
  /* 布局背景颜色 */
  background-color: #5e5e5e;
  /* 圆角大小 */
  border-radius: 3px;
  /* 文本对齐方式 */
  text-align: right;
}
.btnGroup{
  display: flex;
  /* 布局下的组件水平分布 */
  flex-direction: row;
}
.item{
  width: 160rpx;
  height: 150rpx;
  margin: 10rpx;
  /* 阴影效果 */
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  /* 设置圆角的大小 */
  border-radius: 5px;
  /* 文字居中显示 */
  text-align: center;
  line-height: 150rpx;
}
.orange{
  /* 字体颜色 */
  color:black;
  /* 边框线条的粗细和颜色 */
  border:solid 1px #da7c0c;
  /* 整个框的颜色 */
  background:#e5e5e5;
}

最后的效果:

每天进步一点点，开心也多一点点。