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

不二如是

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

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

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

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

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

calc.wxml代码：

<!-- 计算器前端页面 -->
<view>
<view>计算结果</view>

<!-- 第一行 -->
<view>
<button>历史</button>
<button>C</button>
<button>←</button>
<button>/</button>
</view>

<!-- 第二行 -->
<view>
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
</view>

<!-- 第三行 -->
<view>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
</view>

<!-- 第四行 -->
<view>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
</view>

<!-- 第五行 -->
<view>
<!-- ±代表正负 -->
<button>±</button>
<button>0</button>
<button>.</button>
<button>=</button>
</view>
</view>

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

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

---

课后作业


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



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

TianXieBoy

沙发来一个

郑载序

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

优时风

不知道

一笙彤

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