微信小程序计算器模拟后续

时间：2021-11-13 17:53:26

今天按着自己的思路又重打了一遍

wxml没什么说的，就是分块起名，显示数字和结果的作为屏幕，数字键盘一行四块

<view class="onTop">

    <view class="screen">{{screenData}}</view>

  </view>

  <!--键盘操作-->

  <view class="onBottom">

    <view class="Row">

      <view class="item blue" bindtap='onTap' id="{{clear}}">C</view>

      <view class="item blue" bindtap='onTap' id="{{del}}">←</view>

      <view class="item blue" bindtap='history' id="{{history}}">history</view>

      <view class="item blue" bindtap='onTap' id="{{add}}">+</view>

    </view>

    <view class="Row">

      <view class="item orange" bindtap='onTap' id="{{id9}}">9</view>

      <view class="item orange" bindtap='onTap' id="{{id8}}">8</view>

      <view class="item orange" bindtap='onTap' id="{{id7}}">7</view>

      <view class="item blue"   bindtap='onTap' id="{{minus}}">-</view>

    </view>

    <view class="Row">

      <view class="item orange" bindtap='onTap' id="{{id6}}">6</view>

      <view class="item orange" bindtap='onTap' id="{{id5}}">5</view>

      <view class="item orange" bindtap='onTap' id="{{id4}}">4</view>

      <view class="item blue"   bindtap='onTap' id="{{multiply}}">*</view>

    </view>

    <view class="Row">

      <view class="item orange" bindtap='onTap' id="{{id3}}">3</view>

      <view class="item orange" bindtap='onTap' id="{{id2}}">2</view>

      <view class="item orange" bindtap='onTap' id="{{id1}}">1</view>

      <view class="item blue"   bindtap='onTap' id="{{divided}}">/</view>

    </view>

    <view class="Row">

      <view class="item zero orange" bindtap='onTap' id="{{id0}}">0</view>

      <view class="item orange" bindtap='onTap' id="{{dot}}">.</view>

      <view class="item blue"   bindtap='onTap' id="{{equal}}">=</view>

    </view>

  </view>

wxss调调样式

有几个首次用的地方记录一下：

display:flex

　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

它即可以应用于容器中，也可以应用于行内元素。

flex-direction

1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }

属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

然后是js

js分4种条件判断

首先获取输入的值，其次判断他的符号

1.如果输入的符号是删除，判断是否为0，反之，那就对字符串进行最后一位的删除，用substring截取到倒数第二位反映到前台显示，如果删没了就保持为0；同时在后台记录的数组中pop出最后一位；

 if(id==this.data.del){//删除的实现

      var data=this.data.screenData;

      if(data=="0"){

        return ;

      }

      data=data.substring(0,data.length-1);//删除data数组最后一位，实现删除

      if(data==""||data=="-")

      {

        data=0;

      }

     this.setData({"screenData":data});

     this.data.arr.pop();

2.如果输入的符号是清零，那就简单粗暴的将前台显示设置为0；同时后台存储的数组清空；

else if(id==this.data.clear){//清屏

      this.setData({"screenData":0});

      this.data.arr.length=0;}

3如果输入的是加减乘除和数字的话判断符号不能连续输入，将输入的数字和符号连续的存入数组arr中，然后在前台显示

else{//+-*/和数字输入

      if(this.data.operaSym[id]){

        if(this.data.lastIsOperaSym||this.data.screenData=="0"){//禁止多输入符号

          return;

        }

      }

        var sd=this.data.screenData;

        var data;

        if(sd==0){

          data=id;

        }

        else{

          data=sd+id;

        }

        this.setData({"screenData":data});

        this.data.arr.push(id);

        if (this.data.operaSym[id]) {//判断是否输入符号

          this.setData({ "lastIsOperaSym": true });

        } else {

          this.setData({ "lastIsOperaSym": false });

        }

      }
4输入的是等号，在等号中对数据进行处理，还没改对，result值搞不出来，再调试一下

心得：之前没看懂arr哪里传的值还以为是默认传进去的，还跑到大佬的源码底下问人家，丢人的想捂脸跑

相关文章