【页面案例汇总】微信小程序计算器功能页面

代码示例：

wxml文件：

<view class="container">
  <view class="output">
    <text class="result">{
   
   {result}}</text>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="7">7</button>
    <button class="btn" bindtap="buttonClick" data-value="8">8</button>
    <button class="btn" bindtap="buttonClick" data-value="9">9</button>
    <button class="btn orange" bindtap="buttonClick" data-value="/">÷</button>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="4">4</button>
    <button class="btn" bindtap="buttonClick" data-value="5">5</button>
    <button class="btn" bindtap="buttonClick" data-value="6">6</button>
    <button class="btn orange" bindtap="buttonClick" data-value="*">×</button>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="1">1</button>
    <button class="btn" bindtap="buttonClick" data-value="2">2</button>
    <button class="btn" bindtap="buttonClick" data-value="3">3</button>
    <button class="btn orange" bindtap="buttonClick" data-value="-">-</button>
  </view>
  <view class="row">
    <button class="btn" bindtap="buttonClick" data-value="0">0</button>
    <button class="btn" bindtap="buttonClick" data-value=".">.</button>
    <button class="btn orange" bindtap="buttonClick" data-value="+">+</button>
    <button class="btn green" bindtap="calculate">=</button>
  </view>
</view>

wxss文件：

.container {
    
    
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.output {
    
    
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20rpx;
  background-color: #f3f3f3;
}

.result {
    
    
  font-size: 48rpx;
}

.row {
    
    
  display: flex;
  justify-content: space-between;
}

.btn {
    
    
  flex: 1;
  font-size: 36rpx;
  padding: 20rpx;
  background-color: #e9e9e9;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  margin: 10rpx;
}

.btn.orange {
    
    
  background-color: #ff9900;
  color: #fff;
}

.btn.green {
    
    
  background-color: #00cc66;
  color: #fff;
}

js文件：

Page({
    
    
  data: {
    
    
    result: ''
  },
  buttonClick: function (event) {
    
    
    var value = event.currentTarget.dataset.value;
    this.setData({
    
    
      result: this.data.result + value
    })
  },
  calculate: function () {
    
    
    var expression = this.data.result;
    var result = eval(expression);
    this.setData({
    
    
      result: result.toString()
    })
  }
})

代码解释：

1. 整个页面使用 flex 布局，高度 100vh，分为 output，row 两个块级元素。
2. output 块级元素用于显示计算结果，使用 flex 布局，内容居右。
3. row 块级元素使用 flex 布局，每一行放四个 button 元素，包括数字和运算符。
4. button 元素使用 flex 布局，每个元素宽度为均分四份，包括数字、运算符和等于号。
5. 点击数字和运算符按钮时，调用 buttonClick 函数，将按钮的值加到计算结果中。
6. 点击等于号时，调用 calculate 函数，将计算结果通过 eval 函数计算，并显示在 result 中。

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）