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

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

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

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;
}

最后的效果:

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