微信小程序实现计算器案例

<!--pages/index/index.wxml--><view class="result">  <view class="result-num">{{num}}</view>  <view class="result-op">{{op}}</view></view><view class="btns">  <view>    <view hover-class="bg" bindtap="resetBtn">C</view>    <view hover-class="bg" bindtap="delBtn">DEL</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="numBtn" data-val="7">7</view>    <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>    <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>    <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>  </view>  <view>    <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>    <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>    <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>  </view>  <view>    <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>    <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>    <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>    <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>  </view>  <view>    <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>    <view hover-class="bg" bindtap="dotBtn">.</view>    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>  </view></view>

/* pages/index/index.wxss */page {  display: flex;  flex-direction: column;  height: 100%;  color: #555;}.result {  flex: 1;  background: #f3f6fe;  position: relative;}.result-num {  position: absolute;  font-size: 27pt;  bottom: 5vh;  right: 3vw;}.result-op {  font-size: 15pt;  position: absolute;  bottom: 1vh;  right: 3vw;}.btns {  flex: 1;}/* 按钮样式 */.bg {  background: rgb(223, 44, 20);}.btns {  flex: 1;  display: flex;  flex-direction: column;  font-size: 17pt;  border-top: 1rpx solid #ccc;  border-left: 1rpx solid #ccc;}.btns > view {  flex: 1;  display: flex;}.btns > view > view {  flex-basis: 25%;  border-right: 1rpx solid #ccc;  border-bottom: 1rpx solid #ccc;  box-sizing: border-box;  display: flex;  align-items: center;  justify-content: center;}.btns > view:last-child > view:first-child {  flex-basis: 50%;}.btns > view:first-child > view:first-child {  color: #f00;}.btns > view > view:last-child {  color: #fc8e00;}