#yyds干货盘点#杨校老师课堂之微信小程序计算器制作(上)

---

第一块区域是显示结果的灰色区域：

(1) 在index.wxml内编写代码

<view class="result"></view>

(2) 在index.wxss内编写样式

page{
  display: flex;
  flex-direction: column;/**垂直方向排列 ，从上到下**/
  height: 100%;
}
.result{
  flex: 1;/* 页面的两个view平分整个页面的高度*/ 
  background-color: #f3f6fe;
}

---

第二个是按钮输入区域:

(1) 在index.wxml内编写代码

<view class="btns">
    <view>
        <view hover-class="bg" bindtap="resetBtn">C</view><!--hover-class 是当按下该键后的效果-->
        <view hover-class="bg" bindtap="delBtn">CE</view>
        <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
        <view hover-class="bg" bindtap="opBtn" data-val="/">/</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numberBtn" data-val="7">7</view>
        <view hover-class="bg" bindtap="numberBtn" data-val="8">8</view>
        <view hover-class="bg" bindtap="numberBtntn" data-val="9">9</view>
        <view hover-class="bg" bindtap="opBtn" data-val="*">x</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numberBtn" data-val="4">4</view>
        <view hover-class="bg" bindtap="numberBtn" data-val="5">5</view>
        <view hover-class="bg" bindtap="numberBtntn" data-val="6">6</view>
        <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numberBtn" data-val="1">1</view>
        <view hover-class="bg" bindtap="numberBtn" data-val="2">2</view>
        <view hover-class="bg" bindtap="numberBtntn" data-val="3">3</view>
        <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
    </view>
    <view>
        <view hover-class="bg" bindtap="numberBtn" data-val="0">0</view>
        <view hover-class="bg" bindtap="dotBtn">.</view>
        <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
     
    </view>
</view>

(2) 在index.wxss内编写样式

.bg{
background-color: #eeeeee;
}

.btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #cccccc;
  border-left: 1rpx solid #cccccc;
}

.btns > view {
 flex: 1;
 display: flex;
}


.btns > view > view {
  flex-basis: 25%;
  display: flex;
  border-bottom: 1rpx solid #cccccc;
  border-right: 1rpx  solid #cccccc ;
  align-items: center;
  box-sizing: border-box;/*因为0按钮要进行跨列，占用两个按钮。线条对应不齐，所以采用边框作为元素宽高的一部分*/
  justify-content: center;
 }

 
.btns > view:last-child > view:first-child {
  flex-basis: 50%;/* 实现按钮0 占用两个按钮的宽度*/
}
.btns > view:last-child > view:first-child {
color: #000000;
}

.btns > view:last-child > view:first-child {
  color: #fc8e00;
  }