高仿苹果计算器

先上图吧，今天要做的是一个高仿苹果计算器，做出来的效果如上图所示。

 <!-- 计算器按钮 -->
  <view class="button-container">
  
    <view class="row">
      <button class="number">C</button>
      <button class="number" bindtap="tapAbsolute">+/_</button>
      <button class="number" bindtap="tapPercent">%</button>
      <button class="operator {{operator == '/' ? 'optActive' : ''}}" data-value="/" bindtap="tapOperator">÷</button>
    </view>
  
    <view class="row">
      <button class="number" data-value="7" bindtap="tapNumber">7</button>
      <button class="number" data-value="8" bindtap="tapNumber">8</button>
      <button class="number" data-value="9" bindtap="tapNumber">9</button>
      <button class="operator {{operator == '*' ? 'optActive' : ''}}" data-value="*" bindtap="tapOperator">×</button>
    </view>
  
    <view class="row">
      <button class="number" data-value="4" bindtap="tapNumber">4</button>
      <button class="number" data-value="5" bindtap="tapNumber">5</button>
      <button class="number" data-value="6" bindtap="tapNumber">6</button>
      <button class="operator {{operator == '-' ? 'optActive' : ''}}" data-value="-" bindtap="tapOperator">-</button>
    </view>
  
    <view class="row">
      <button class="number" data-value="1" bindtap="tapNumber">1</button>
      <button class="number" data-value="2" bindtap="tapNumber">2</button>
      <button class="number" data-value="3" bindtap="tapNumber">3</button>
      <button class="operator {{operator == '+' ? 'optActive' : ''}}" data-value="+" bindtap="tapOperator">+</button>
    </view>
  
    <view class="row">
      <button class="number large" data-value="0" bindtap="tapNumber">0</button>
      <button class="number" data-value="." bindtap="tapNumber">.</button>
      <button class="operator" bindtap="tapCalculate">=</button>
    </view>

  </view>

首先看一下他的整体布局，从上往下，从左往右看，其实它就是一个个的按钮而已。然后分成number数字按钮，operator功能操作按钮。

 // 数字
  tapNumber: function(e) {
    // console.log('数字按钮：', e);
    const num = e.currentTarget.dataset['value'];
    if (num) {
      this.data.result += num;

      const fmtNumber = StringUtil.formatNumber(this.data.result);

      // 限制最大长度
      if (fmtNumber.length > 11)
        return;
 
      this.setData({
        result: fmtNumber
      });
    } else {
      console.warn('对应的 data-value 属性异常！');
    }
  },

这是点击按钮的响应。

 // 加减乘除
  tapOperator: function(e) {
    console.log('tap: ', e);
    const opt = e.currentTarget.dataset['value'];
    if (opt) {
      this.setData({
        operator: opt
      });
    }
  },

这是点击操作符之后的响应。也就是进行加减乘除操作。

总体来说实现并不是太难。想要学习微信小程序的可以关注公众号：诗一样的代码，一起探讨一下。