|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2018-7-16 09:17 编辑
上一讲我们搭好框架了,本次来实现计算器的布局。
实现上面的布局,我们需要先将界面分为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、计算器中的正负号用什么符号表示?
答案:
如果有收获,别忘了评分 :
这位鱼油,如果喜欢小程序,请订阅 专辑( 传送门)( 不喜欢更要订阅 )
|
|