【UniApp】-uni-app-项目实战页面布局(苹果计算器)
前言
- 經過前面的文章介紹，基本上 UniApp 的內容就介紹完畢了
- 那么從本文開始，我們就開始進行一個項目的實戰
- 這次做的項目是蘋果計算器，這個項目的難度不是很大，但是也不是很簡單，適合練手
創建項目
- 打開 HBuilderX，點擊左上角
文件->新建->項目：
搭建基本布局
項目創建完畢之后，首先來分析一下蘋果計算器的整體布局結構，分為一上一下如下圖：
- 上面的部分主要是顯示計算結果的，下面的部分主要是顯示計算器的按鍵
搭建上半部分布局
更改 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>
- 這里使用的是 input 標簽，因為 input 標簽可以設置 disabled 屬性，這樣就可以禁止用戶輸入了
- 然后我們給 input 設置了一個 v-model，這樣就可以實現雙向綁定了
- 然后我們給 input 設置了一個 style，這樣就可以設置字體大小了
- 給 input 設置了一個 class，這樣就可以設置樣式了
.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
<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 確定了每個按鈕的唯一性
運行一下，效果如下：
內容都顯示出來了，現在只需要去編寫樣式即可, 我這里采用 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：字體顏色
.ft-color {
color: black;
}
- bg-orange：橙色背景
.bg-orange {
background-color: orange;
}
- bg-darkgray：深灰色背景
.bg-darkgray {
background: gray;
}
- bg-gray：灰色背景
.bg-gray {
background-color: darkgrey;
}
- btn-size2：按鈕大小
.btn-size2 {
width: 300rpx;
border-radius: 75rpx;
}
最后將不用的樣式清理掉，刪除 .result-view 中的 background: red; 和 .btns-view 中的 background: blue;。
最后我再附上一張最后的效果圖：
End
- 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
- 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力
總結
以上是生活随笔為你收集整理的【UniApp】-uni-app-项目实战页面布局(苹果计算器)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flash怎么作一只可爱的卡通小黄鸭
- 下一篇： AntDesignBlazor示例——M