060 ∞ 实现前端布局 |【实战篇】

不二如是

                               
登录/注册后可看大图

上一讲我们搭好框架了，本次来实现计算器的布局。

                               
登录/注册后可看大图

实现上面的布局，我们需要先将界面分为6行，可以使用6个view（传送门）。

第1行的view实现计算结果。

第2-6行的view组件作为一个容器组件，在每个view组件中添加4个button（传送门）。

最后，在最外层套一个view作为整个页面的容器。

calc.wxml代码：

1. <!-- 计算器前端页面 -->
   
2. <view>
   
3. <view>计算结果</view>
   
4. 
   
5. <!-- 第一行 -->
   
6. <view>
   
7. <button>历史</button>
   
8. <button>C</button>
   
9. <button>←</button>
   
10. <button>/</button>
    
11. </view>
    
12. 
    
13. <!-- 第二行 -->
    
14. <view>
    
15. <button>7</button>
    
16. <button>8</button>
    
17. <button>9</button>
    
18. <button>*</button>
    
19. </view>
    
20. 
    
21. <!-- 第三行 -->
    
22. <view>
    
23. <button>4</button>
    
24. <button>5</button>
    
25. <button>6</button>
    
26. <button>-</button>
    
27. </view>
    
28. 
    
29. <!-- 第四行 -->
    
30. <view>
    
31. <button>1</button>
    
32. <button>2</button>
    
33. <button>3</button>
    
34. <button>+</button>
    
35. </view>
    
36. 
    
37. <!-- 第五行 -->
    
38. <view>
    
39. <!-- ±代表正负 -->
    
40. <button>±</button>
    
41. <button>0</button>
    
42. <button>.</button>
    
43. <button>=</button>
    
44. </view>
    
45. </view>

复制代码

编译后，布局是有了，但是效果肯定不是我们想要的。

下一讲我们进入calc.wxss进行样式设置。

---

课后作业


1、计算器中的正负号用什么符号表示？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

TianXieBoy

沙发来一个

郑载序

微信小程序的代码是什么？

优时风

不知道

一笙彤

计算结果下面少了一个</view>吧