论坛 › Web密训营 › 060 ∞ 实现前端布局 |【实战篇】

不二如是 发表于 2018-7-15 09:21:01

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

本帖最后由 不二如是 于 2018-7-16 09:17 编辑

http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png

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

http://xxx.fishc.org/forum/201807/13/095854fxabt3nbxkytwe7u.png

实现上面的布局，我们需要先将界面分为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、计算器中的正负号用什么符号表示？



答案：
**** Hidden Message *****



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.org/forum/201709/19/094516hku92k2g4kefz8ms.gif

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

http://xxx.fishc.org/forum/201803/21/151715umqz1qoywp11wjbq.gif

TianXieBoy 发表于 2018-7-15 17:08:28

沙发来一个

郑载序 发表于 2018-7-20 12:09:46

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

优时风 发表于 2020-5-22 16:24:47

不知道

一笙彤 发表于 2020-7-8 10:00:54

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

查看完整版本: 060 ∞ 实现前端布局 |【实战篇】