文件
-> 新建
-> 项目
:项目创建完毕之后,首先来分析一下苹果计算器的整体布局结构,分为一上一下如下图:
更改 index.vue 的内容如下:
<template>
<view class="content">
<view class="result-view"></view>
<view class="btns-view"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
.content {
width: 100%;
height: 100%;
background-color: black;
padding-left: 30rpx;
padding-right: 30rpx;
box-sizing: border-box;
}
</style>
运行一下,看看效果发现,背景并没有是黑色,而是白色。
注意点:在 UniApp 中所有的元素都是放在 page 中的, 所以想要全屏,可以直接设置 page 的样式
我们需要在 App.vue
中修改一下:
<style lang="scss">
/*每个页面公共css */
page {
width: 100%;
height: 100%;
}
</style>
这么一改,就可以了,效果如下:
在改一下 index 的 navigationBarTitleText 为 计算器
,更改 pages.json 如下:
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "计算器"
}
}],
基本上大致的容器布局代码就写完了,再继续来完善一下一上一下的布局,更改样式:
.result-view {
width: 100%;
height: 35%;
background: red;
}
.btns-view {
width: 100%;
height: 65%;
background: blue;
}
我这里使用的是 scss 进行编写,这两个类样式是编写在 .content
中的,效果如下:
一上一下区分完毕了,先来完善一下上面的部分,这个部分主要是显示计算结果的,我们需要在这个部分中放置一个文本框,用来显示计算结果,更改代码如下:
<template>
<view class="content">
<view class="result-view">
<input class="result-box" type="text" v-model="showValue" disabled="true" style="font-size: 180rpx;" />
</view>
<view class="btns-view"></view>
</view>
</template>
<script>
export default {
data() {
return {
showValue: 0
}
},
onLoad() {
},
methods: {
}
}
</script>
.result-box
的样式如下:
.result-box {
height: 30%;
text-align: right;
color: white;
}
效果如下:
但是呢,我发现位置不对,这里我使用子绝父相的方式来进行布局,更改代码如下:
.result-view {
width: 100%;
height: 35%;
background: red;
position: relative;
.result-box {
height: 30%;
text-align: right;
color: white;
position: absolute;
left: 0;
bottom: 0;
}
}
上方的内容先到此为止,接下来完善一下下方的内容,通过我的观察,我发现是有规律的唯一没有规律的就是最后一行,这一行我们先不看,我先布局,不符合的地方我在单独处理,废话不多说我直接上代码。
<view class="btn-radius"></view>
在这个 view 容器当中我添加了一个 class 用来设置圆角的,因为每个按钮都是圆角的,好,样式代码我先不编写,继续分析,那么这么多的按钮难道都是 c + v 去复制出来吧,不可能,所以我这里采用循环的方式来进行创建即可,这里我就直接贴代码:
buttons: [{
text: 'AC',
class: 'ft-color bg-gray ml-zero',
func: 'operator',
params: 'clear',
},
{
text: '+/-',
class: 'ft-color bg-gray',
func: 'operator',
params: 'opposite',
},
{
text: '%',
class: 'ft-color bg-gray',
func: 'operator',
params: 'percent',
},
{
text: '÷',
class: 'bg-orange',
func: 'operator',
params: 'divide',
},
{
text: '7',
class: 'bg-darkgray ml-zero',
func: 'inputText',
params: '7',
},
{
text: '8',
class: 'bg-darkgray',
func: 'inputText',
params: '8',
},
{
text: '9',
class: 'bg-darkgray',
func: 'inputText',
params: '9',
},
{
text: '×',
class: 'bg-orange',
func: 'operator',
params: 'multiply',
},
{
text: '4',
class: 'bg-darkgray ml-zero',
func: 'inputText',
params: '4',
},
{
text: '5',
class: 'bg-darkgray',
func: 'inputText',
params: '5',
},
{
text: '6',
class: 'bg-darkgray',
func: 'inputText',
params: '6',
},
{
text: '-',
class: 'bg-orange',
func: 'operator',
params: 'minus',
},
{
text: '1',
class: 'bg-darkgray ml-zero',
func: 'inputText',
params: '1',
},
{
text: '2',
class: ' bg-darkgray',
func: 'inputText',
params: '2',
},
{
text: '3',
class: ' bg-darkgray',
func: 'inputText',
params: '3',
},
{
text: '+',
class: 'bg-orange',
func: 'operator',
params: 'plus',
},
{
text: '0',
class: 'btn-size2 bg-darkgray ml-zero',
func: 'inputText',
params: '0',
},
{
text: '.',
class: 'bg-darkgray',
func: 'inputText',
params: '.',
},
{
text: '=',
class: 'bg-orange',
func: 'operator',
params: 'result',
}
]
这个是定义在 data 中的,然后我们需要在页面中进行循环,这里我使用的是 v-for,代码如下:
<view class="btns-view">
<view class="btn-radius" v-for="item in buttons" :key="item.text" :class="[item.class]"
@click="operate(item)">{{item.text}}</view>
</view>
运行一下,效果如下:
内容都显示出来了,现在只需要去编写样式即可, 我这里采用 flex 布局,代码如下:
.btns-view {
width: 100%;
height: 65%;
background: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
.btn-radius {
margin-left: 30rpx;
width: 150rpx;
height: 150rpx;
line-height: 150rpx;
border-radius: 50%;
text-align: center;
font-size: 60rpx;
color: white;
}
}
运行,效果如下图,但是发现还是有问题的:
这个问题呢,我已经想到了,之前不是在 data 中定义了一个 buttons 数组吗,这个数组中存放的是每个按钮的信息,在信息中有一个 class 属性里面有一个 ml-zero
这个是用来设置按钮的左边距的,凡是添加了这个属性就代表着没有左边距,直接上样式代码:
.ml-zero {
margin-left: 0;
}
运行,效果如下,可以看到已经非常接近苹果计算器的样式了:
到这里基本上已经完成了大部分的布局了,接下来将对应字体的样式写写本文的内容就大致完毕了,样式代码如下:
.ft-color {
color: black;
}
.bg-orange {
background-color: orange;
}
.bg-darkgray {
background: gray;
}
.bg-gray {
background-color: darkgrey;
}
.btn-size2 {
width: 300rpx;
border-radius: 75rpx;
}
最后将不用的样式清理掉,删除 .result-view
中的 background: red;
和 .btns-view
中的 background: blue;
。
最后我再附上一张最后的效果图:
如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等,可点击“私信”按钮向作者进行反馈;如作者无回复可进行平台仲裁,我们会在第一时间进行处理!
加入交流群
请使用微信扫一扫!