【UniApp】-uni-app-项目实战页面布局(苹果计算器)

  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)已关闭评论
  • 16 次浏览
  • A+
所属分类:Web前端
摘要

项目创建完毕之后,首先来分析一下苹果计算器的整体布局结构,分为一上一下如下图:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

前言

  • 经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了
  • 那么从本文开始,我们就开始进行一个项目的实战
  • 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手

创建项目

  • 打开 HBuilderX,点击左上角 文件 -> 新建 -> 项目

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

搭建基本布局

项目创建完毕之后,首先来分析一下苹果计算器的整体布局结构,分为一上一下如下图:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

  • 上面的部分主要是显示计算结果的,下面的部分主要是显示计算器的按键

搭建上半部分布局

更改 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> 

这么一改,就可以了,效果如下:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

在改一下 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 中的,效果如下:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

一上一下区分完毕了,先来完善一下上面的部分,这个部分主要是显示计算结果的,我们需要在这个部分中放置一个文本框,用来显示计算结果,更改代码如下:

<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> 
  • 这里使用的是 input 标签,因为 input 标签可以设置 disabled 属性,这样就可以禁止用户输入了
  • 然后我们给 input 设置了一个 v-model,这样就可以实现双向绑定了
  • 然后我们给 input 设置了一个 style,这样就可以设置字体大小了
  • 给 input 设置了一个 class,这样就可以设置样式了

.result-box 的样式如下:

.result-box {     height: 30%;     text-align: right;     color: white; } 

效果如下:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

但是呢,我发现位置不对,这里我使用子绝父相的方式来进行布局,更改代码如下:

.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
<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',     } ] 
  • 这里我定义了一个 buttons 数组,里面存放的是每个按钮的信息
  • text:按钮的文本
  • class:按钮的样式
  • func:按钮的功能
  • params:按钮的参数

这个是定义在 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> 
  • 这里我使用的是 v-for 来进行循环
  • 然后我给每个按钮添加了一个 class,这个 class 是从 buttons 数组中获取的,动态样式
  • 然后我给每个按钮添加了一个点击事件,这个点击事件调用 methods 中的 operate 方法, 传入的参数是当前按钮的信息
  • 然后我给每个按钮添加了一个文本,这个文本也是从 buttons 数组中获取的,动态文本
  • 然后我给每个按钮添加了一个 key,这个 key 是当前按钮的文本,这个 key 确定了每个按钮的唯一性

运行一下,效果如下:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

内容都显示出来了,现在只需要去编写样式即可, 我这里采用 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;     } } 

运行,效果如下图,但是发现还是有问题的:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

这个问题呢,我已经想到了,之前不是在 data 中定义了一个 buttons 数组吗,这个数组中存放的是每个按钮的信息,在信息中有一个 class 属性里面有一个 ml-zero 这个是用来设置按钮的左边距的,凡是添加了这个属性就代表着没有左边距,直接上样式代码:

.ml-zero {     margin-left: 0; } 

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

运行,效果如下,可以看到已经非常接近苹果计算器的样式了:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

到这里基本上已经完成了大部分的布局了,接下来将对应字体的样式写写本文的内容就大致完毕了,样式代码如下:

  • ft-color:字体颜色
.ft-color {     color: black; } 

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

  • bg-orange:橙色背景
.bg-orange {     background-color: orange; } 

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

  • bg-darkgray:深灰色背景
.bg-darkgray {     background: gray; } 

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

  • bg-gray:灰色背景
.bg-gray {     background-color: darkgrey; } 

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

  • btn-size2:按钮大小
.btn-size2 {     width: 300rpx;     border-radius: 75rpx; } 

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

最后将不用的样式清理掉,删除 .result-view 中的 background: red;.btns-view 中的 background: blue;

最后我再附上一张最后的效果图:

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力

【UniApp】-uni-app-项目实战页面布局(苹果计算器)