1、新建目录calc
2、pages加上
"pages/calc/calc",
3、 calc.wxml
<view class="container">
<input placeholder="被加数" bindinput="bindInput1" />
<input placeholder="加数" bindinput="bindInput2" />
<button type="primary" bindtap="bindAdd">计算</button>
<input placeholder="结果" value="{{result}}" disabled />
</view>
4、calc.wxss
/* pages/calc/calc.wxss */
.container{
justify-content: flex-start;
padding: 30rpx 0;
}
.container input{
background-color: #eee;
border-radius:3px;
text-align:left;
width:720rpx;
height:100rpx;
line-height:100rpx;
margin:20rpx;
}
.container button{
width:80%;
}
5、calc.json
{
"navigationBarBackgroundColor":"#00ff00",
"navigationBarTitleText":"加法计算器",
"navigationBarTextStyle":"white",
"usingComponents": {}
}
6、calc.js
// pages/calc/calc.js
Page({
/**
- 页面的初始数据
/
data: {
num1:"",
num2:"",
result:""
},
bindAdd:function(e){
var r=this.data.num11+this.data.num2*1;
this.setData({
result:r
});
},
bindInput1:function(e){
var n=e.detail.value;
if(!isNaN(n)){
this.setData({
num1:n
});
}
},
bindInput2: function (e) {
var n = e.detail.value;
if (!isNaN(n)) {
this.setData({
num2: n
});
}
}
})
