经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
【UniApp】-uni-app-项目实战页面布局(苹果计算器)
来源:cnblogs  作者:BNTang  时间:2023/12/26 9:52:03  对本文有异议

前言

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

创建项目

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

搭建基本布局

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

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

搭建上半部分布局

更改 index.vue 的内容如下:

  1. <template>
  2. <view class="content">
  3. <view class="result-view"></view>
  4. <view class="btns-view"></view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. }
  12. },
  13. onLoad() {
  14. },
  15. methods: {
  16. }
  17. }
  18. </script>
  19. <style lang="scss">
  20. .content {
  21. width: 100%;
  22. height: 100%;
  23. background-color: black;
  24. padding-left: 30rpx;
  25. padding-right: 30rpx;
  26. box-sizing: border-box;
  27. }
  28. </style>

运行一下,看看效果发现,背景并没有是黑色,而是白色。

注意点:在 UniApp 中所有的元素都是放在 page 中的, 所以想要全屏,可以直接设置 page 的样式

我们需要在 App.vue 中修改一下:

  1. <style lang="scss">
  2. /*每个页面公共css */
  3. page {
  4. width: 100%;
  5. height: 100%;
  6. }
  7. </style>

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

在改一下 index 的 navigationBarTitleText 为 计算器,更改 pages.json 如下:

  1. "pages": [{
  2. "path": "pages/index/index",
  3. "style": {
  4. "navigationBarTitleText": "计算器"
  5. }
  6. }],

基本上大致的容器布局代码就写完了,再继续来完善一下一上一下的布局,更改样式:

  1. .result-view {
  2. width: 100%;
  3. height: 35%;
  4. background: red;
  5. }
  6. .btns-view {
  7. width: 100%;
  8. height: 65%;
  9. background: blue;
  10. }

我这里使用的是 scss 进行编写,这两个类样式是编写在 .content 中的,效果如下:

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

  1. <template>
  2. <view class="content">
  3. <view class="result-view">
  4. <input class="result-box" type="text" v-model="showValue" disabled="true" style="font-size: 180rpx;" />
  5. </view>
  6. <view class="btns-view"></view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. showValue: 0
  14. }
  15. },
  16. onLoad() {
  17. },
  18. methods: {
  19. }
  20. }
  21. </script>
  • 这里使用的是 input 标签,因为 input 标签可以设置 disabled 属性,这样就可以禁止用户输入了
  • 然后我们给 input 设置了一个 v-model,这样就可以实现双向绑定了
  • 然后我们给 input 设置了一个 style,这样就可以设置字体大小了
  • 给 input 设置了一个 class,这样就可以设置样式了

.result-box 的样式如下:

  1. .result-box {
  2. height: 30%;
  3. text-align: right;
  4. color: white;
  5. }

效果如下:

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

  1. .result-view {
  2. width: 100%;
  3. height: 35%;
  4. background: red;
  5. position: relative;
  6. .result-box {
  7. height: 30%;
  8. text-align: right;
  9. color: white;
  10. position: absolute;
  11. left: 0;
  12. bottom: 0;
  13. }
  14. }

搭建下半部分布局

上方的内容先到此为止,接下来完善一下下方的内容,通过我的观察,我发现是有规律的唯一没有规律的就是最后一行,这一行我们先不看,我先布局,不符合的地方我在单独处理,废话不多说我直接上代码。

  • 首先在下方布局代码当中,添加一个 view
  1. <view class="btn-radius"></view>

在这个 view 容器当中我添加了一个 class 用来设置圆角的,因为每个按钮都是圆角的,好,样式代码我先不编写,继续分析,那么这么多的按钮难道都是 c + v 去复制出来吧,不可能,所以我这里采用循环的方式来进行创建即可,这里我就直接贴代码:

  1. buttons: [{
  2. text: 'AC',
  3. class: 'ft-color bg-gray ml-zero',
  4. func: 'operator',
  5. params: 'clear',
  6. },
  7. {
  8. text: '+/-',
  9. class: 'ft-color bg-gray',
  10. func: 'operator',
  11. params: 'opposite',
  12. },
  13. {
  14. text: '%',
  15. class: 'ft-color bg-gray',
  16. func: 'operator',
  17. params: 'percent',
  18. },
  19. {
  20. text: '÷',
  21. class: 'bg-orange',
  22. func: 'operator',
  23. params: 'divide',
  24. },
  25. {
  26. text: '7',
  27. class: 'bg-darkgray ml-zero',
  28. func: 'inputText',
  29. params: '7',
  30. },
  31. {
  32. text: '8',
  33. class: 'bg-darkgray',
  34. func: 'inputText',
  35. params: '8',
  36. },
  37. {
  38. text: '9',
  39. class: 'bg-darkgray',
  40. func: 'inputText',
  41. params: '9',
  42. },
  43. {
  44. text: '×',
  45. class: 'bg-orange',
  46. func: 'operator',
  47. params: 'multiply',
  48. },
  49. {
  50. text: '4',
  51. class: 'bg-darkgray ml-zero',
  52. func: 'inputText',
  53. params: '4',
  54. },
  55. {
  56. text: '5',
  57. class: 'bg-darkgray',
  58. func: 'inputText',
  59. params: '5',
  60. },
  61. {
  62. text: '6',
  63. class: 'bg-darkgray',
  64. func: 'inputText',
  65. params: '6',
  66. },
  67. {
  68. text: '-',
  69. class: 'bg-orange',
  70. func: 'operator',
  71. params: 'minus',
  72. },
  73. {
  74. text: '1',
  75. class: 'bg-darkgray ml-zero',
  76. func: 'inputText',
  77. params: '1',
  78. },
  79. {
  80. text: '2',
  81. class: ' bg-darkgray',
  82. func: 'inputText',
  83. params: '2',
  84. },
  85. {
  86. text: '3',
  87. class: ' bg-darkgray',
  88. func: 'inputText',
  89. params: '3',
  90. },
  91. {
  92. text: '+',
  93. class: 'bg-orange',
  94. func: 'operator',
  95. params: 'plus',
  96. },
  97. {
  98. text: '0',
  99. class: 'btn-size2 bg-darkgray ml-zero',
  100. func: 'inputText',
  101. params: '0',
  102. },
  103. {
  104. text: '.',
  105. class: 'bg-darkgray',
  106. func: 'inputText',
  107. params: '.',
  108. },
  109. {
  110. text: '=',
  111. class: 'bg-orange',
  112. func: 'operator',
  113. params: 'result',
  114. }
  115. ]
  • 这里我定义了一个 buttons 数组,里面存放的是每个按钮的信息
  • text:按钮的文本
  • class:按钮的样式
  • func:按钮的功能
  • params:按钮的参数

这个是定义在 data 中的,然后我们需要在页面中进行循环,这里我使用的是 v-for,代码如下:

  1. <view class="btns-view">
  2. <view class="btn-radius" v-for="item in buttons" :key="item.text" :class="[item.class]"
  3. @click="operate(item)">{{item.text}}</view>
  4. </view>
  • 这里我使用的是 v-for 来进行循环
  • 然后我给每个按钮添加了一个 class,这个 class 是从 buttons 数组中获取的,动态样式
  • 然后我给每个按钮添加了一个点击事件,这个点击事件调用 methods 中的 operate 方法, 传入的参数是当前按钮的信息
  • 然后我给每个按钮添加了一个文本,这个文本也是从 buttons 数组中获取的,动态文本
  • 然后我给每个按钮添加了一个 key,这个 key 是当前按钮的文本,这个 key 确定了每个按钮的唯一性

运行一下,效果如下:

内容都显示出来了,现在只需要去编写样式即可, 我这里采用 flex 布局,代码如下:

  1. .btns-view {
  2. width: 100%;
  3. height: 65%;
  4. background: blue;
  5. display: flex;
  6. flex-wrap: wrap;
  7. justify-content: space-evenly;
  8. .btn-radius {
  9. margin-left: 30rpx;
  10. width: 150rpx;
  11. height: 150rpx;
  12. line-height: 150rpx;
  13. border-radius: 50%;
  14. text-align: center;
  15. font-size: 60rpx;
  16. color: white;
  17. }
  18. }

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

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

  1. .ml-zero {
  2. margin-left: 0;
  3. }

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

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

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

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

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

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

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

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

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

End

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

原文链接:https://www.cnblogs.com/BNTang/p/17924091.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号